npm - @oods/component-styles - Versions diffs - 0.3.3 → 0.4.0 - Mend

@oods/component-styles 0.3.3 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +1 -1
package/dist/{chunk-QTCJ7H3Z.js → chunk-T5I3FGSQ.js} +4 -1
package/dist/components-overlay.css +270 -0
package/dist/components-ported.css +43 -21
package/dist/components.css +739 -235
package/dist/index.cjs +4 -1
package/dist/index.d.cts +1 -1
package/dist/index.d.ts +1 -1
package/dist/index.js +1 -1
package/dist/ported.cjs +4 -1
package/dist/ported.js +1 -1
package/package.json +3 -3

package/dist/components.css CHANGED Viewed

@@ -1,5 +1,6 @@
 @import "@oods/tokens/css";
 @import "./statusables.css";
+@import "./components-overlay.css";
 /* Legacy unprefixed geometry used by billing recipes. Values come from the
  * semantic layer; preserve these names until their authored callers migrate. */
@@ -12,159 +13,313 @@
   --radius-md: var(--sys-radius-control);
 }
+/* s222-m01 (#2502 ruling 8): the document root and every brand scope carry the brand's sans and a line height, so no
+ * element falls back to the browser's font or its `normal` line height. */
+:where(:root, [data-brand][data-theme]) {
+  font-family: var(--sys-font-sans);
+  line-height: var(--sys-text-line-height-root);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* s222-m02 (#2502 ruling 8): a heading inside a component reads on the type scale, never at the browser's default (a
+ * bold 24px h2). A component's own rule places its title on a role; any other h1 or h2 is heading-md and h3 to h6
+ * heading-sm. The :where() keeps this below every component rule. */
+:where([data-oods-component]) :where(h1, h2) {
+  font-size: var(--sys-text-scale-heading-md-font-size, 18px);
+  font-weight: var(--sys-text-scale-heading-md-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-md-line-height, 24px);
+}
+:where([data-oods-component]) :where(h3, h4, h5, h6) {
+  font-size: var(--sys-text-scale-heading-sm-font-size, 16px);
+  font-weight: var(--sys-text-scale-heading-sm-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-sm-line-height, 24px);
+}
+/* s222-m02 (#2502 ruling 11): a badge is a 20px pill, 12/500 with 2px 8px padding, tinted (the tone's step-3 surface
+ * and step-11 text) with no border. */
 :where(.oods-badge, [data-oods-component='Badge']) {
   display: inline-flex;
   align-items: center;
   gap: var(--cmp-badge-gap, 0.25rem);
   padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
-  border: 1px solid var(--cmp-badge-border, var(--cmp-border-default, currentColor));
+  border: 0;
   border-radius: var(--cmp-badge-radius, 999px);
   background: var(--cmp-badge-background, var(--cmp-surface-subtle, transparent));
   color: var(--cmp-badge-text, var(--cmp-text-body, currentColor));
-  font-size: var(--cmp-badge-font-size, 0.875rem);
-  font-weight: var(--cmp-badge-font-weight, 600);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
 }
-/* Every governed Badge uses the same geometry, including React's legacy statusable class. */
+/* Every governed Badge uses the same geometry, including React's legacy statusable class: the caption role's 16px line
+ * and the 2px block padding make the 20px height. */
 .oods-badge {
-  min-block-size: var(--cmp-badge-height, 1.5rem);
+  min-block-size: var(--cmp-badge-height, 1.25rem);
   box-sizing: border-box;
-  font-size: var(--cmp-badge-font-size, 0.875rem);
-  line-height: var(--sys-text-line-height-tight, 1.2);
+  /* s222-m03: a badge hugs its label, also as the item of a stacked (column) layout, which would otherwise stretch it. */
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  font-size: var(--cmp-badge-font-size, 12px);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
   letter-spacing: normal;
   text-transform: none;
+  white-space: nowrap;
   gap: var(--cmp-badge-gap, 0.25rem);
 }
 /* s221-m02 (#2482 ruling 2): React and Vue render one Badge markup, an icon slot and a label span, styled here; React's
- * former statusable-badge classes no longer apply. */
+ * former statusable-badge classes no longer apply. s222-m02: a status mark is an SVG drawn in the text colour at the
+ * text's size. */
 .oods-badge__label { display: inline-flex; align-items: center; line-height: inherit; }
-.oods-badge__icon { display: inline-flex; align-items: center; font-size: 0.85em; }
+.oods-badge__icon { display: inline-flex; align-items: center; }
+:where(.oods-badge__icon, .oods-banner__icon) > svg { display: block; inline-size: 1em; block-size: 1em; }
+/* s222-m02 (#2502 ruling 11): a tone paints its tint (step-3 surface, step-11 text; a banner also its step-7 border) and,
+ * for emphasis, its solid fill (step 9, darkened until its text passes) with the graded text colour, for badges and banners
+ * alike. The tone names are the ones every renderer writes to data-tone, so HTML output needs no inline colours; React and
+ * Vue also write the same values inline. */
+:where(.oods-badge, [data-oods-component='Badge'], .oods-banner, [data-oods-component='Banner'])[data-tone='neutral'] {
+  --cmp-badge-background: var(--sys-status-neutral-surface);
+  --cmp-badge-text: var(--sys-status-neutral-text);
+  --cmp-banner-background: var(--sys-status-neutral-surface);
+  --cmp-banner-border: var(--sys-status-neutral-border);
+  --cmp-banner-text: var(--sys-status-neutral-text);
+  --oods-tone-solid: var(--sys-status-neutral-solid);
+  --oods-tone-on-solid: var(--sys-status-neutral-on-solid);
+}
+:where(.oods-badge, [data-oods-component='Badge'], .oods-banner, [data-oods-component='Banner'])[data-tone='info'] {
+  --cmp-badge-background: var(--sys-status-info-surface);
+  --cmp-badge-text: var(--sys-status-info-text);
+  --cmp-banner-background: var(--sys-status-info-surface);
+  --cmp-banner-border: var(--sys-status-info-border);
+  --cmp-banner-text: var(--sys-status-info-text);
+  --oods-tone-solid: var(--sys-status-info-solid);
+  --oods-tone-on-solid: var(--sys-status-info-on-solid);
+}
+:where(.oods-badge, [data-oods-component='Badge'], .oods-banner, [data-oods-component='Banner'])[data-tone='accent'] {
+  --cmp-badge-background: var(--sys-status-accent-surface);
+  --cmp-badge-text: var(--sys-status-accent-text);
+  --cmp-banner-background: var(--sys-status-accent-surface);
+  --cmp-banner-border: var(--sys-status-accent-border);
+  --cmp-banner-text: var(--sys-status-accent-text);
+  --oods-tone-solid: var(--sys-status-accent-solid);
+  --oods-tone-on-solid: var(--sys-status-accent-on-solid);
+}
+:where(.oods-badge, [data-oods-component='Badge'], .oods-banner, [data-oods-component='Banner']):is([data-tone='success'], [data-tone='positive']) {
+  --cmp-badge-background: var(--sys-status-success-surface);
+  --cmp-badge-text: var(--sys-status-success-text);
+  --cmp-banner-background: var(--sys-status-success-surface);
+  --cmp-banner-border: var(--sys-status-success-border);
+  --cmp-banner-text: var(--sys-status-success-text);
+  --oods-tone-solid: var(--sys-status-success-solid);
+  --oods-tone-on-solid: var(--sys-status-success-on-solid);
+}
+:where(.oods-badge, [data-oods-component='Badge'], .oods-banner, [data-oods-component='Banner'])[data-tone='warning'] {
+  --cmp-badge-background: var(--sys-status-warning-surface);
+  --cmp-badge-text: var(--sys-status-warning-text);
+  --cmp-banner-background: var(--sys-status-warning-surface);
+  --cmp-banner-border: var(--sys-status-warning-border);
+  --cmp-banner-text: var(--sys-status-warning-text);
+  --oods-tone-solid: var(--sys-status-warning-solid);
+  --oods-tone-on-solid: var(--sys-status-warning-on-solid);
+}
+:where(.oods-badge, [data-oods-component='Badge'], .oods-banner, [data-oods-component='Banner']):is([data-tone='critical'], [data-tone='danger']) {
+  --cmp-badge-background: var(--sys-status-critical-surface);
+  --cmp-badge-text: var(--sys-status-critical-text);
+  --cmp-banner-background: var(--sys-status-critical-surface);
+  --cmp-banner-border: var(--sys-status-critical-border);
+  --cmp-banner-text: var(--sys-status-critical-text);
+  --oods-tone-solid: var(--sys-status-critical-solid);
+  --oods-tone-on-solid: var(--sys-status-critical-on-solid);
+}
-/* Solid reverses the already contrast-checked status surface/text pair. */
 :where(.oods-badge, [data-oods-component='Badge'])[data-emphasis='solid'] {
-  border-color: var(--cmp-badge-text, var(--sys-status-neutral-text, CanvasText));
-  background: var(--cmp-badge-text, var(--sys-status-neutral-text, CanvasText));
-  color: var(--cmp-badge-background, var(--sys-status-neutral-surface, Canvas));
+  background: var(--oods-tone-solid, var(--sys-status-neutral-solid, CanvasText));
+  color: var(--oods-tone-on-solid, var(--sys-status-neutral-on-solid, Canvas));
 }
 :where(.oods-banner, [data-oods-component='Banner'])[data-emphasis='solid'] {
-  border-color: var(--cmp-banner-text, var(--sys-status-neutral-text, CanvasText));
-  background: var(--cmp-banner-text, var(--sys-status-neutral-text, CanvasText));
-  color: var(--cmp-banner-background, var(--sys-status-neutral-surface, Canvas));
+  border-color: transparent;
+  background: var(--oods-tone-solid, var(--sys-status-neutral-solid, CanvasText));
+  color: var(--oods-tone-on-solid, var(--sys-status-neutral-on-solid, Canvas));
 }
+/* s222-m02 (#2502 ruling 11): a banner reads at the small body size (14/20) with 12px by 16px padding and the large
+ * control radius; the tone paints its surface, border and text. */
 :where(.oods-banner, [data-oods-component='Banner']) {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--cmp-spacing-inline-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-inset-sm, 0.75rem) var(--sys-inset-md, 1rem);
   border: 1px solid var(--cmp-banner-border, var(--cmp-border-default, currentColor));
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--sys-radius-control-lg, 8px);
   background: var(--cmp-banner-background, var(--cmp-surface-subtle, transparent));
   color: var(--cmp-banner-text, var(--cmp-text-body, currentColor));
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
 /* s221-m02 (#2482 ruling 2): the one Banner markup React and Vue share. A status icon takes its own column; the content
  * stacks the title, detail, body and actions without paragraph margins. React's former statusable-banner classes, which
- * gave React alone a three-column grid, no longer apply. */
+ * gave React alone a three-column grid, no longer apply. s222-m02: the icon is a 16px SVG on the title's line. */
 :where(.oods-banner:has(> .oods-banner__icon)) { grid-template-columns: auto 1fr auto; }
-.oods-banner__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.25em; }
+.oods-banner__icon { display: inline-flex; align-items: center; justify-content: center; block-size: var(--sys-text-scale-body-sm-line-height, 20px); font-size: var(--sys-control-icon-size, 1rem); }
 .oods-banner__content { display: grid; align-content: start; gap: var(--sys-control-gap-compact, 0.25rem); min-inline-size: 0; }
-.oods-banner__title { font-weight: var(--ref-typography-weights-bold, 700); }
+/* The title is the heading weight in both the current and the earlier Vue class names. */
+:is(.oods-banner__title, .oods-banner-title) { font-weight: var(--sys-text-scale-heading-sm-font-weight, 600); }
 :is(.oods-banner__detail, .oods-banner__body) { margin: 0; }
 .oods-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); margin-block-start: var(--sys-control-gap-compact, 0.25rem); }
+/* s222-m02 (#2502 rulings 9 and 11): a button is its control height at every size (xs 24, sm 28, md 32, lg 40), the same
+ * block size as the input, select and segmented control beside it, with 8/10/12/16px side padding and the label role's
+ * type (12/16 at xs, 14/20 at sm and md, 16/24 at lg; weight 500). The height centres the line, so no block padding sets
+ * it. */
 :where(.oods-button, [data-oods-component='Button']) {
-  --oods-button-min-block-size: var(--cmp-button-height, 2.5rem);
-  --oods-button-padding-block: var(--cmp-button-padding-block, 0.625rem);
-  --oods-button-padding-inline: var(--cmp-button-padding-inline, 1rem);
-  --oods-button-font-size: var(--sys-text-size-md, 1rem);
+  --oods-button-block-size: var(--cmp-button-height, 2rem);
+  --oods-button-padding-inline: var(--cmp-button-padding-inline, 0.75rem);
+  --oods-button-font-size: var(--sys-text-scale-label-font-size, 14px);
+  --oods-button-line-height: var(--sys-text-scale-label-line-height, 20px);
+  --oods-button-gap: var(--cmp-button-gap, 0.5rem);
   display: inline-flex;
-  min-block-size: var(--oods-button-min-block-size);
+  min-block-size: var(--oods-button-block-size);
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  gap: var(--cmp-button-gap, 0.5rem);
-  padding: var(--oods-button-padding-block) var(--oods-button-padding-inline);
+  gap: var(--oods-button-gap);
+  padding: var(--oods-button-padding-block, 0) var(--oods-button-padding-inline);
   border: 1px solid var(--oods-button-border, var(--cmp-button-border, transparent));
-  border-radius: var(--cmp-button-radius, 0.5rem);
+  border-radius: var(--cmp-button-radius, 6px);
   background: var(--oods-button-background, var(--cmp-button-background, var(--cmp-surface-action, CanvasText)));
   color: var(--oods-button-text, var(--cmp-button-text, var(--cmp-text-on-action, Canvas)));
   font: inherit;
   font-size: var(--oods-button-font-size);
-  font-weight: var(--cmp-button-font-weight, 600);
-  line-height: var(--sys-text-line-height-tight, 1.2);
+  font-weight: var(--cmp-button-font-weight, 500);
+  line-height: var(--oods-button-line-height);
+  white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
-:where(.oods-button, [data-oods-component='Button'])[data-intent='neutral'] {
-  --oods-button-background: var(--sys-surface-inverse, CanvasText);
-  --oods-button-background-hover: var(--sys-surface-inverse, CanvasText);
-  --oods-button-border: var(--sys-surface-inverse, CanvasText);
-  --oods-button-text: var(--sys-text-inverse, Canvas);
+:where(.oods-button, [data-oods-component='Button']) > svg {
+  flex: none;
+  inline-size: var(--sys-control-icon-size, 1rem);
+  block-size: var(--sys-control-icon-size, 1rem);
+}
+/* s222-m02 (#2502 ruling 11): the variants. neutral, which a button without an intent also gets, is the outline look, so a
+ * screen's primary action is its one solid fill; secondary is the subtle fill (neutral steps 3 to 5); ghost and link carry
+ * no fill until hovered; destructive and danger share the destructive fill with its graded text; success and warning keep
+ * their status solids. */
+:where(.oods-button, [data-oods-component='Button']):is([data-intent='neutral'], [data-intent='outline'], :not([data-intent])) {
+  --oods-button-background: var(--sys-surface-raised, Canvas);
+  --oods-button-background-hover: var(--sys-surface-interactive-secondary-default, Canvas);
+  --oods-button-background-pressed: var(--sys-surface-interactive-secondary-hover, Canvas);
+  --oods-button-border: var(--sys-border-strong, CanvasText);
+  --oods-button-text: var(--sys-text-primary, CanvasText);
 }
 :where(.oods-button, [data-oods-component='Button'])[data-intent='primary'] {
   --oods-button-background: var(--sys-surface-interactive-primary-default, CanvasText);
   --oods-button-background-hover: var(--sys-surface-interactive-primary-hover, CanvasText);
-  --oods-button-border: var(--sys-surface-interactive-primary-default, CanvasText);
+  --oods-button-background-pressed: var(--sys-surface-interactive-primary-pressed, CanvasText);
+  --oods-button-border: transparent;
   --oods-button-text: var(--sys-text-on-interactive, Canvas);
 }
 :where(.oods-button, [data-oods-component='Button'])[data-intent='secondary'] {
-  --oods-button-background: var(--sys-surface-subtle, Canvas);
-  --oods-button-background-hover: var(--sys-surface-canvas, Canvas);
-  --oods-button-border: var(--sys-border-strong, CanvasText);
+  --oods-button-background: var(--sys-surface-interactive-secondary-default, Canvas);
+  --oods-button-background-hover: var(--sys-surface-interactive-secondary-hover, Canvas);
+  --oods-button-background-pressed: var(--sys-surface-interactive-secondary-pressed, Canvas);
+  --oods-button-border: transparent;
   --oods-button-text: var(--sys-text-primary, CanvasText);
 }
-:where(.oods-button, [data-oods-component='Button'])[data-intent='success'] {
-  --oods-button-background: var(--sys-status-success-text, CanvasText);
-  --oods-button-background-hover: var(--sys-status-success-text, CanvasText);
-  --oods-button-border: var(--sys-status-success-text, CanvasText);
-  --oods-button-text: var(--sys-status-success-surface, Canvas);
+:where(.oods-button, [data-oods-component='Button'])[data-intent='ghost'] {
+  --oods-button-background: transparent;
+  --oods-button-background-hover: var(--sys-surface-interactive-secondary-default, Canvas);
+  --oods-button-background-pressed: var(--sys-surface-interactive-secondary-hover, Canvas);
+  --oods-button-border: transparent;
+  --oods-button-text: var(--sys-text-primary, CanvasText);
 }
-:where(.oods-button, [data-oods-component='Button'])[data-intent='warning'] {
-  --oods-button-background: var(--sys-status-warning-text, CanvasText);
-  --oods-button-background-hover: var(--sys-status-warning-text, CanvasText);
-  --oods-button-border: var(--sys-status-warning-text, CanvasText);
-  --oods-button-text: var(--sys-status-warning-surface, Canvas);
+:where(.oods-button, [data-oods-component='Button'])[data-intent='link'] {
+  --oods-button-background: transparent;
+  --oods-button-background-hover: transparent;
+  --oods-button-background-pressed: transparent;
+  --oods-button-border: transparent;
+  --oods-button-text: var(--sys-text-accent, LinkText);
+  text-underline-offset: 0.25em;
 }
-:where(.oods-button, [data-oods-component='Button'])[data-intent='danger'] {
-  --oods-button-background: var(--sys-status-critical-text, CanvasText);
-  --oods-button-background-hover: var(--sys-status-critical-text, CanvasText);
-  --oods-button-border: var(--sys-status-critical-text, CanvasText);
-  --oods-button-text: var(--sys-status-critical-surface, Canvas);
+:where(.oods-button, [data-oods-component='Button'])[data-intent='link']:hover:not(:disabled) { text-decoration: underline; }
+:where(.oods-button, [data-oods-component='Button']):is([data-intent='destructive'], [data-intent='danger']) {
+  --oods-button-background: var(--sys-surface-interactive-destructive-default, CanvasText);
+  --oods-button-background-hover: var(--sys-surface-interactive-destructive-hover, CanvasText);
+  --oods-button-background-pressed: var(--sys-surface-interactive-destructive-pressed, CanvasText);
+  --oods-button-border: transparent;
+  --oods-button-text: var(--sys-text-on-destructive, Canvas);
+}
+:where(.oods-button, [data-oods-component='Button'])[data-intent='success'] {
+  --oods-button-background: var(--sys-status-success-solid, CanvasText);
+  --oods-button-border: transparent;
+  --oods-button-text: var(--sys-status-success-on-solid, Canvas);
+}
+:where(.oods-button, [data-oods-component='Button'])[data-intent='warning'] {
+  --oods-button-background: var(--sys-status-warning-solid, CanvasText);
+  --oods-button-border: transparent;
+  --oods-button-text: var(--sys-status-warning-on-solid, Canvas);
+}
+/* Each size rule also sets the type, so a page's own reset (button { font: inherit }, at element specificity) cannot undo
+ * the size's label role; the base rule's declarations sit at zero specificity. */
+:where(.oods-button, [data-oods-component='Button'])[data-size='xs'] {
+  --oods-button-block-size: var(--sys-control-height-xs, 1.5rem);
+  --oods-button-padding-inline: var(--sys-control-padding-inline-xs, 0.5rem);
+  --oods-button-font-size: var(--sys-text-scale-caption-font-size, 12px);
+  --oods-button-line-height: var(--sys-text-scale-caption-line-height, 16px);
+  --oods-button-gap: var(--sys-control-icon-gap-sm, 0.375rem);
+  font-size: var(--oods-button-font-size);
+  line-height: var(--oods-button-line-height);
 }
 :where(.oods-button, [data-oods-component='Button'])[data-size='sm'] {
-  --oods-button-min-block-size: var(--cmp-button-height-sm, 2rem);
-  --oods-button-padding-block: var(--cmp-button-padding-block-sm, 0.375rem);
-  --oods-button-padding-inline: var(--cmp-button-padding-inline-sm, 0.75rem);
-  --oods-button-font-size: var(--sys-text-size-sm, 0.875rem);
+  --oods-button-block-size: var(--cmp-button-height-sm, 1.75rem);
+  --oods-button-padding-inline: var(--cmp-button-padding-inline-sm, 0.625rem);
+  --oods-button-gap: var(--sys-control-icon-gap-sm, 0.375rem);
   font-size: var(--oods-button-font-size);
+  line-height: var(--oods-button-line-height);
 }
 :where(.oods-button, [data-oods-component='Button'])[data-size='md'] {
-  --oods-button-min-block-size: var(--cmp-button-height, 2.5rem);
-  --oods-button-padding-block: var(--cmp-button-padding-block, 0.625rem);
-  --oods-button-padding-inline: var(--cmp-button-padding-inline, 1rem);
-  --oods-button-font-size: var(--sys-text-size-md, 1rem);
+  --oods-button-block-size: var(--cmp-button-height, 2rem);
+  --oods-button-padding-inline: var(--cmp-button-padding-inline, 0.75rem);
   font-size: var(--oods-button-font-size);
+  line-height: var(--oods-button-line-height);
 }
 :where(.oods-button, [data-oods-component='Button'])[data-size='lg'] {
-  --oods-button-min-block-size: var(--cmp-button-height-lg, 3rem);
-  --oods-button-padding-block: var(--cmp-button-padding-block-lg, 0.75rem);
-  --oods-button-padding-inline: var(--cmp-button-padding-inline-lg, 1.5rem);
-  --oods-button-font-size: var(--sys-text-size-lg, 1.25rem);
+  --oods-button-block-size: var(--cmp-button-height-lg, 2.5rem);
+  --oods-button-padding-inline: var(--cmp-button-padding-inline-lg, 1rem);
+  --oods-button-font-size: var(--sys-text-scale-body-md-font-size, 16px);
+  --oods-button-line-height: var(--sys-text-scale-body-md-line-height, 24px);
   font-size: var(--oods-button-font-size);
+  line-height: var(--oods-button-line-height);
 }
 :where(.oods-button, [data-oods-component='Button']):hover:not(:disabled) {
-  background: var(--oods-button-background-hover, var(--cmp-button-background-hover, var(--cmp-surface-action-hover, CanvasText)));
+  background: var(--oods-button-background-hover, var(--oods-button-background, var(--cmp-button-background-hover, CanvasText)));
+}
+:where(.oods-button, [data-oods-component='Button']):active:not(:disabled) {
+  background: var(--oods-button-background-pressed, var(--oods-button-background-hover, var(--oods-button-background, var(--cmp-button-background-hover, CanvasText))));
 }
 :where(.oods-button, [data-oods-component='Button']):disabled {
@@ -174,6 +329,12 @@
   cursor: not-allowed;
 }
+/* A disabled ghost or link button keeps no fill, as it has none at rest. */
+:where(.oods-button, [data-oods-component='Button']):is([data-intent='ghost'], [data-intent='link']):disabled {
+  border-color: transparent;
+  background: transparent;
+}
 /* One focus treatment for every interactive element, native controls included:
  * token width, colour and offset. Nothing else in this stylesheet paints focus. */
 :where(.oods-button, [data-oods-component='Button'], .oods-field-control, .oods-tab, .oods-table-row-action, .oods-collection-row,
@@ -185,16 +346,23 @@
   outline-offset: var(--cmp-focus-offset, 2px);
 }
+/* s222-m02 (#2502 rulings 9 and 10): a card is border-only on the raised surface with the card radius and 24px padding;
+ * its children stack 16px apart with no browser margins, so its header, body and actions sit on the card's own rhythm. */
 :where(.oods-card, [data-oods-component='Card']) {
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  display: grid;
+  align-content: start;
+  gap: var(--sys-stack-md, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-border-default, var(--sys-border-subtle));
   border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-surface-panel, var(--sys-surface-raised));
   color: var(--cmp-text-body, var(--sys-text-primary));
 }
+:where(.oods-card, [data-oods-component='Card']) > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl) { margin: 0; }
 :where(.oods-card[data-elevated='true'], [data-oods-component='Card'][data-elevated='true']) {
-  box-shadow: var(--cmp-card-shadow-offset-x, 0px) var(--cmp-card-shadow-offset-y, 16px) var(--cmp-card-shadow-blur, 40px) var(--cmp-card-shadow-spread, -12px) var(--cmp-card-shadow-color, rgba(15, 23, 42, 0.12));
+  box-shadow: var(--cmp-card-shadow-offset-x, 0px) var(--cmp-card-shadow-offset-y, 4px) var(--cmp-card-shadow-blur, 8px) var(--cmp-card-shadow-spread, -4px) var(--cmp-card-shadow-color, rgba(15, 23, 42, 0.12));
 }
 /* The tokens build scopes colour per brand and theme; the dark elevation tokens are
@@ -212,38 +380,58 @@
   --cmp-shadow-overlay-color: var(--theme-dark-shadow-elevation-overlay-color);
 }
+/* s222-m02 (#2502 ruling 8): headings sit on the type roles. A detail header's title is the page title (heading-xl,
+ * 30/36 600) over a 16/24 subtitle and 14/20 metadata; a card header's title is heading-sm (16/24 600) over 14/20
+ * supporting text. */
 :where([data-oods-component='DetailHeader'], [data-oods-component='CardHeader']) {
   --cmp-header-title: var(--sys-text-primary);
   --cmp-header-subtitle: var(--sys-text-secondary);
   --cmp-header-metadata: var(--sys-text-muted);
   display: grid;
-  gap: var(--sys-spacing-stack-compact, 0.75rem);
+  gap: var(--sys-control-gap-compact, 0.25rem);
 }
+:where([data-oods-component='DetailHeader']) { gap: var(--sys-stack-xs, 0.5rem); }
 :where([data-oods-component='DetailHeader'], [data-oods-component='CardHeader']) > :is(h1, h2, h3, h4, h5, h6) {
   margin: 0;
   color: var(--cmp-header-title, CanvasText);
-  font-weight: var(--ref-typography-weights-semibold, 600);
-  line-height: var(--sys-text-line-height-standard, 1.4);
 }
 :where([data-oods-component='DetailHeader']) > :is(h1, h2, h3, h4, h5, h6) {
-  font-size: var(--sys-text-scale-heading-lg-font-size, 1.5rem);
-  line-height: var(--sys-text-scale-heading-lg-line-height, 1.2);
+  font-size: var(--sys-text-scale-heading-xl-font-size, 30px);
+  font-weight: var(--sys-text-scale-heading-xl-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-xl-line-height, 36px);
+  letter-spacing: var(--sys-text-scale-heading-xl-letter-spacing);
 }
 :where([data-oods-component='CardHeader']) > :is(h1, h2, h3, h4, h5, h6) {
-  font-size: var(--sys-text-size-lg, 1.25rem);
+  font-size: var(--sys-text-scale-heading-sm-font-size, 16px);
+  font-weight: var(--sys-text-scale-heading-sm-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-sm-line-height, 24px);
 }
 :where([data-oods-component='DetailHeader']) > [data-oods-subtitle],
 :where([data-oods-component='CardHeader']) > [data-oods-supporting] {
+  margin: 0;
   color: var(--cmp-header-subtitle, CanvasText);
 }
+:where([data-oods-component='DetailHeader']) > [data-oods-subtitle] {
+  font-size: var(--sys-text-scale-body-md-font-size, 16px);
+  line-height: var(--sys-text-scale-body-md-line-height, 24px);
+}
+:where([data-oods-component='CardHeader']) > [data-oods-supporting] {
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
+}
 :where([data-oods-component='DetailHeader']) > [data-oods-metadata] {
+  margin: 0;
   color: var(--cmp-header-metadata, CanvasText);
-  font-size: var(--sys-text-size-sm, 0.875rem);
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
 :where([data-oods-component='ColorSwatch']) {
@@ -261,7 +449,7 @@
   inline-size: 1.25rem;
   block-size: 1.25rem;
   border: 1px solid var(--cmp-swatch-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
   background: var(--oods-swatch-color, var(--cmp-swatch-chip, CanvasText));
 }
@@ -274,19 +462,22 @@
   display: inline-flex;
   align-items: center;
   gap: var(--cmp-badge-gap, 0.25rem);
+  min-block-size: var(--cmp-badge-height, 1.25rem);
+  box-sizing: border-box;
   padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
-  border: 1px solid var(--cmp-badge-border, CanvasText);
+  border: 0;
   border-radius: var(--cmp-badge-radius, 999px);
   background: var(--cmp-badge-background, Canvas);
   color: var(--cmp-badge-text, CanvasText);
-  font-size: var(--cmp-badge-font-size, 0.875rem);
-  font-weight: var(--cmp-badge-font-weight, 600);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
+  white-space: nowrap;
 }
 :where([data-oods-component='ColorizedBadge'])[data-emphasis='solid'] {
-  border-color: var(--cmp-badge-text, CanvasText);
-  background: var(--cmp-badge-text, CanvasText);
-  color: var(--cmp-badge-background, Canvas);
+  background: var(--oods-tone-solid, var(--sys-status-neutral-solid, CanvasText));
+  color: var(--oods-tone-on-solid, var(--sys-status-neutral-on-solid, Canvas));
 }
 :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker] {
@@ -318,7 +509,7 @@
   min-block-size: var(--oods-viz-height, 360px);
   padding: var(--cmp-spacing-inset-default, 1rem);
   border: 1px dashed var(--cmp-preview-frame, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
   background: var(--sys-surface-canvas, Canvas);
 }
@@ -335,9 +526,12 @@
   border: 0;
   place-items: stretch;
 }
+/* s222-m02 (#2502 ruling 8): a placed chart's caption is heading-sm (16/24 600). It was an undocumented min() with a
+ * 1.25rem literal. */
 :where([data-viz-rendered='true']) > figcaption {
-  font-size: min(var(--sys-text-scale-heading-md-font-size, 1.25rem), 1.25rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
+  font-size: var(--sys-text-scale-heading-sm-font-size, 16px);
+  font-weight: var(--sys-text-scale-heading-sm-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-sm-line-height, 24px);
 }
 :where([data-viz-svg]) { min-inline-size: 0; }
 :where([data-viz-svg]) > svg { display: block; inline-size: 100%; max-inline-size: var(--oods-viz-width, 100%); block-size: auto; }
@@ -373,18 +567,18 @@
   --cmp-timeline-marker: var(--sys-border-strong);
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-timeline-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-timeline-background, Canvas);
   color: var(--cmp-timeline-text, CanvasText);
 }
 :where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) > [data-timeline-title] {
   margin: 0;
-  font-size: var(--sys-text-size-lg, 1.25rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
-  line-height: var(--sys-text-line-height-standard, 1.4);
+  font-size: var(--sys-text-scale-heading-md-font-size, 18px);
+  font-weight: var(--sys-text-scale-heading-md-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-md-line-height, 24px);
 }
 :where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) > [data-timeline-events] {
@@ -419,7 +613,7 @@
   gap: var(--sys-spacing-stack-compact, 0.75rem);
   padding: var(--cmp-spacing-inset-sm, 0.75rem);
   border: 1px solid var(--cmp-event-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
   background: var(--cmp-event-background, Canvas);
   color: var(--cmp-event-text, CanvasText);
 }
@@ -447,19 +641,22 @@
   display: inline-flex;
   align-items: center;
   gap: var(--cmp-badge-gap, 0.25rem);
+  min-block-size: var(--cmp-badge-height, 1.25rem);
+  box-sizing: border-box;
   padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
-  border: 1px solid var(--cmp-badge-border, CanvasText);
+  border: 0;
   border-radius: var(--cmp-badge-radius, 999px);
   background: var(--cmp-badge-background, Canvas);
   color: var(--cmp-badge-text, CanvasText);
-  font-size: var(--cmp-badge-font-size, 0.875rem);
-  font-weight: var(--cmp-badge-font-weight, 600);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
+  white-space: nowrap;
 }
 :where([data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'])[data-emphasis='solid'] {
-  border-color: var(--cmp-badge-text, CanvasText);
-  background: var(--cmp-badge-text, CanvasText);
-  color: var(--cmp-badge-background, Canvas);
+  background: var(--oods-tone-solid, var(--sys-status-neutral-solid, CanvasText));
+  color: var(--oods-tone-on-solid, var(--sys-status-neutral-on-solid, Canvas));
 }
 :where([data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge']) [data-oods-badge-label] {
@@ -484,13 +681,17 @@
 :where([data-oods-component='TagPills']) [data-tag-overflow] {
   display: inline-flex;
   align-items: center;
+  min-block-size: var(--cmp-badge-height, 1.25rem);
+  box-sizing: border-box;
   padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
-  border: 1px solid var(--cmp-badge-border, CanvasText);
+  border: 0;
   border-radius: var(--cmp-badge-radius, 999px);
   background: var(--cmp-badge-background, Canvas);
   color: var(--cmp-badge-text, CanvasText);
-  font-size: var(--cmp-badge-font-size, 0.875rem);
-  font-weight: var(--cmp-badge-font-weight, 600);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
+  white-space: nowrap;
 }
 /* Panel, filter and summary sections mirror their HTML renderers; controls stay unwired. */
@@ -501,9 +702,9 @@
   --cmp-panel-subtitle: var(--sys-text-secondary);
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-panel-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-panel-background, Canvas);
   color: var(--cmp-panel-title, CanvasText);
 }
@@ -516,9 +717,9 @@
 :where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel']) > [data-panel-header] > h2 {
   margin: 0;
   color: var(--cmp-panel-title, CanvasText);
-  font-size: var(--sys-text-size-lg, 1.25rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
-  line-height: var(--sys-text-line-height-standard, 1.4);
+  font-size: var(--sys-text-scale-heading-md-font-size, 18px);
+  font-weight: var(--sys-text-scale-heading-md-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-md-line-height, 24px);
 }
 :where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel']) > [data-panel-header] > [data-panel-subtitle] {
@@ -537,9 +738,9 @@
   --cmp-filter-legend: var(--sys-text-secondary);
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-filter-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-filter-background, Canvas);
   color: var(--cmp-filter-text, CanvasText);
 }
@@ -548,7 +749,7 @@
   margin: 0;
   padding: var(--cmp-spacing-inset-sm, 0.75rem);
   border: 1px solid var(--cmp-filter-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
 }
 :where([data-oods-component='FilterPanel']) > [data-filter-section] > legend {
@@ -563,13 +764,19 @@
   gap: var(--cmp-spacing-inline-sm, 0.75rem);
 }
+/* s222-m02 (#2502 ruling 11): a filter's button is the small outline button. */
 :where([data-oods-component='FilterPanel']) button {
-  padding: var(--cmp-button-padding-block-sm, 0.375rem) var(--cmp-button-padding-inline-sm, 0.75rem);
-  border: 1px solid var(--cmp-filter-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
-  background: transparent;
+  box-sizing: border-box;
+  min-block-size: var(--cmp-button-height-sm, 1.75rem);
+  padding: 0 var(--cmp-button-padding-inline-sm, 0.625rem);
+  border: 1px solid var(--sys-border-strong, CanvasText);
+  border-radius: var(--cmp-button-radius, 6px);
+  background: var(--sys-surface-raised, Canvas);
   color: var(--cmp-filter-text, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-label-font-size, 14px);
+  font-weight: var(--sys-text-scale-label-font-weight, 500);
+  line-height: var(--sys-text-scale-label-line-height, 20px);
 }
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) {
@@ -580,9 +787,9 @@
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
   margin: 0;
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-form-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-form-background, Canvas);
   color: var(--cmp-form-text, CanvasText);
 }
@@ -595,9 +802,9 @@
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) > [data-form-header] > h2 {
   margin: 0;
   color: var(--cmp-form-text, CanvasText);
-  font-size: var(--sys-text-size-lg, 1.25rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
-  line-height: var(--sys-text-line-height-standard, 1.4);
+  font-size: var(--sys-text-scale-heading-md-font-size, 18px);
+  font-weight: var(--sys-text-scale-heading-md-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-md-line-height, 24px);
 }
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) > [data-form-header] > [data-form-subtitle] {
@@ -612,9 +819,18 @@
 }
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) [data-tag-item] {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--cmp-badge-height, 1.25rem);
+  box-sizing: border-box;
   padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
-  border: 1px solid var(--cmp-form-border, CanvasText);
+  border: 0;
   border-radius: var(--cmp-badge-radius, 999px);
+  background: var(--sys-status-neutral-surface, Canvas);
+  color: var(--sys-status-neutral-text, CanvasText);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
 }
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) [data-form-control='input'] {
@@ -627,19 +843,24 @@
   font-size: var(--sys-text-size-sm, 0.875rem);
 }
-:where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) input {
-  padding: var(--cmp-input-padding-block-compact, 0.375rem) var(--cmp-input-padding-inline-compact, 0.5rem);
-  border: 1px solid var(--cmp-form-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
-  background: transparent;
-  color: inherit;
+:where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) input:not([type='checkbox'], [type='radio']) {
+  box-sizing: border-box;
+  min-block-size: var(--sys-control-height-md, 2rem);
+  padding: 0 var(--cmp-input-padding-inline, 0.75rem);
+  border: 1px solid var(--cmp-input-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 6px);
+  background: var(--cmp-input-background, Canvas);
+  color: var(--cmp-input-text, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) > legend {
   padding-inline: var(--sys-control-gap-compact, 0.25rem);
-  font-size: var(--sys-text-size-lg, 1.25rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
+  font-size: var(--sys-text-scale-heading-md-font-size, 18px);
+  font-weight: var(--sys-text-scale-heading-md-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-md-line-height, 24px);
 }
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) > [data-form-subtitle] {
@@ -664,19 +885,25 @@
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) select,
 :where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) textarea {
-  padding: var(--cmp-input-padding-block-compact, 0.375rem) var(--cmp-input-padding-inline-compact, 0.5rem);
-  border: 1px solid var(--cmp-form-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
-  background: transparent;
-  color: inherit;
+  box-sizing: border-box;
+  min-block-size: var(--sys-control-height-md, 2rem);
+  padding: 0 var(--cmp-input-padding-inline, 0.75rem);
+  border: 1px solid var(--cmp-input-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 6px);
+  background: var(--cmp-input-background, Canvas);
+  color: var(--cmp-input-text, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
+:where([data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TagInput'], [data-oods-component='TagManager'], [data-oods-component='TemplatePicker']) textarea { padding-block: var(--sys-control-padding-block-lg, 0.5rem); }
 :where([data-oods-component='StatusSelector']) {
   --cmp-input-background: var(--sys-surface-raised);
-  --cmp-input-border: var(--sys-border-subtle);
+  --cmp-input-border: var(--sys-border-interactive);
   --cmp-input-text: var(--sys-text-primary);
-  --cmp-input-focus: var(--sys-border-strong);
+  --cmp-input-focus: var(--sys-border-interactive-hover);
   display: grid;
   gap: var(--sys-control-gap-compact, 0.25rem);
   color: var(--cmp-input-text, CanvasText);
@@ -688,12 +915,16 @@
 }
 :where([data-oods-component='StatusSelector']) select {
-  padding: var(--cmp-input-padding-block-compact, 0.375rem) var(--cmp-input-padding-inline-compact, 0.5rem);
+  box-sizing: border-box;
+  min-block-size: var(--sys-control-height-md, 2rem);
+  padding: 0 var(--cmp-input-padding-inline, 0.75rem);
   border: 1px solid var(--cmp-input-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
   background: var(--cmp-input-background, Canvas);
   color: var(--cmp-input-text, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
 /* The focus ring is the shared rule above; the focused field also takes the input focus colour on its border. */
@@ -709,18 +940,18 @@
   --cmp-summary-label: var(--sys-text-secondary);
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-summary-border, CanvasText);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-summary-background, Canvas);
   color: var(--cmp-summary-text, CanvasText);
 }
 :where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) > [data-summary-title] {
   margin: 0;
-  font-size: var(--sys-text-size-lg, 1.25rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
-  line-height: var(--sys-text-line-height-standard, 1.4);
+  font-size: var(--sys-text-scale-heading-md-font-size, 18px);
+  font-weight: var(--sys-text-scale-heading-md-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-md-line-height, 24px);
 }
 :where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) > dl {
@@ -748,13 +979,23 @@
   color: var(--cmp-summary-label, CanvasText);
 }
+/* s222-m02 (#2502 rulings 9 and 11): a field's label is the label role (14/20 500); its control sits on the raised
+ * surface with the 3:1 control border and the md control height (32), the same as the button beside it; help text is
+ * muted and an error takes the critical text colour, both at 14/20. A textarea grows by its rows. */
 .oods-field {
   display: grid;
+  /* A field stretched by its row keeps its label on its control instead of spreading the rows apart. */
+  align-content: start;
   gap: var(--cmp-input-gap, 0.375rem);
   color: var(--cmp-text-body, CanvasText);
 }
-.oods-field-label { font-weight: var(--ref-typography-weights-semibold, 600); }
+.oods-field-label {
+  color: var(--sys-text-primary, CanvasText);
+  font-size: var(--sys-text-scale-label-font-size, 14px);
+  font-weight: var(--sys-text-scale-label-font-weight, 500);
+  line-height: var(--sys-text-scale-label-line-height, 20px);
+}
 .oods-field-control,
 :where(
@@ -765,35 +1006,51 @@
 ) {
   inline-size: 100%;
   box-sizing: border-box;
-  padding: var(--cmp-input-padding-block, 0.625rem) var(--cmp-input-padding-inline, 0.75rem);
+  min-block-size: var(--sys-control-height-md, 2rem);
+  padding: 0 var(--cmp-input-padding-inline, 0.75rem);
   border: 1px solid var(--cmp-input-border, var(--cmp-border-default, currentColor));
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
   background: var(--cmp-input-background, Canvas);
   color: var(--cmp-input-text, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
+/* A compact field's control is the sm control height (28), the small button's. */
+.oods-field[data-density='compact'] .oods-field-control { min-block-size: var(--sys-control-height-sm, 1.75rem); }
+:is(textarea.oods-field-control, textarea[data-oods-component='Textarea']) { padding-block: var(--sys-control-padding-block-lg, 0.5rem); }
+.oods-field-control:hover:not(:disabled, [aria-invalid='true']) { border-color: var(--sys-border-interactive-hover, CanvasText); }
+.oods-field-control:disabled { background: var(--sys-surface-disabled, Canvas); color: var(--sys-text-disabled, GrayText); cursor: not-allowed; }
 .oods-field-control::placeholder { color: var(--cmp-input-placeholder, GrayText); }
-.oods-field-control[aria-invalid='true'] { border-color: var(--cmp-input-message-border, Mark); }
+/* An invalid control's border takes the critical icon role, the status step that reaches 3:1 on the surface. */
+.oods-field-control[aria-invalid='true'] { border-color: var(--sys-status-critical-icon, Mark); }
 .oods-field-help { color: var(--cmp-input-support-text, var(--cmp-text-muted, GrayText)); }
-.oods-field-error { color: var(--cmp-input-message-text, MarkText); }
+.oods-field-error { color: var(--cmp-input-message-text, MarkText); font-size: var(--sys-text-scale-body-sm-font-size, 14px); line-height: var(--sys-text-scale-body-sm-line-height, 20px); margin: 0; }
+/* s222-m02 (#2502 ruling 11): the banner's dismiss is a ghost icon button, square at the small control height, centred
+ * on the title's line; its hover tints the banner's own text colour. */
 .oods-banner-dismiss {
   display: inline-flex;
-  inline-size: var(--cmp-button-height, 2.5rem);
-  block-size: var(--cmp-button-height, 2.5rem);
+  inline-size: var(--cmp-button-height-sm, 1.75rem);
+  block-size: var(--cmp-button-height-sm, 1.75rem);
   align-items: center;
   justify-content: center;
   align-self: start;
+  box-sizing: border-box;
+  margin-block: calc(-1 * var(--sys-control-gap-compact, 0.25rem));
   padding: 0;
-  border: 1px solid currentColor;
-  border-radius: var(--cmp-button-radius, 0.5rem);
+  border: 1px solid transparent;
+  border-radius: var(--cmp-button-radius, 6px);
   background: transparent;
   color: inherit;
   font: inherit;
   cursor: pointer;
 }
+.oods-banner-dismiss:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
+.oods-banner-dismiss > svg { inline-size: var(--sys-control-icon-size, 1rem); block-size: var(--sys-control-icon-size, 1rem); }
 :where(.oods-checkbox, [data-oods-component='Checkbox']) {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -832,57 +1089,110 @@
   justify-content: var(--oods-layout-justify, flex-start);
 }
+/* s222-m02 (#2502 rulings 9 and 11): a table sits in a bordered container with the large control radius on the raised
+ * surface. Rows are 44px (36 dense) with 12px (8) cell padding at the small body size (14/20); the header is 500 in the
+ * muted colour; numbers align at the end in tabular figures; the caption is left-aligned above the header, or visually
+ * hidden when its table asks. */
+.oods-table__container {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--sys-border-subtle, CanvasText);
+  border-radius: var(--sys-radius-control-lg, 8px);
+  background: var(--sys-surface-raised, Canvas);
+}
 :where(.oods-table, [data-oods-component='Table']) {
+  --oods-table-row-height: var(--sys-table-row-height, 2.75rem);
+  --oods-table-cell-padding-inline: var(--sys-table-cell-padding-inline, 0.75rem);
   inline-size: 100%;
   border-collapse: collapse;
   background: var(--cmp-surface-panel, Canvas);
   color: var(--cmp-text-body, CanvasText);
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
 :where(.oods-table, [data-oods-component='Table'])[data-density='compact'] {
-  --oods-table-cell-padding-block: var(--sys-space-inset-compact, 0.5rem);
-  --oods-table-cell-padding-inline: var(--sys-space-inline-sm, 0.875rem);
-  font-size: var(--sys-text-size-sm, 0.875rem);
+  --oods-table-row-height: var(--sys-table-row-height-compact, 2.25rem);
+  --oods-table-cell-padding-inline: var(--sys-table-cell-padding-inline-compact, 0.5rem);
 }
 :where(.oods-table, [data-oods-component='Table'])[data-density='default'],
 :where(.oods-table, [data-oods-component='Table'])[data-density='comfortable'] {
-  --oods-table-cell-padding-block: var(--cmp-spacing-inset-sm, 0.75rem);
-  --oods-table-cell-padding-inline: var(--sys-space-inset-default, 1.5rem);
-  font-size: var(--sys-text-size-md, 1rem);
+  --oods-table-row-height: var(--sys-table-row-height, 2.75rem);
+  --oods-table-cell-padding-inline: var(--sys-table-cell-padding-inline, 0.75rem);
 }
 :where(.oods-table, [data-oods-component='Table']) :is(th, td) {
-  padding: var(--oods-table-cell-padding-block, var(--cmp-spacing-inset-compact, 0.75rem))
-    var(--oods-table-cell-padding-inline, var(--cmp-spacing-inset-default, 1rem));
+  box-sizing: border-box;
+  block-size: var(--oods-table-row-height);
+  padding: 0 var(--oods-table-cell-padding-inline);
   border-block-end: 1px solid var(--cmp-border-default, currentColor);
   text-align: start;
+  vertical-align: middle;
+}
+:where(.oods-table, [data-oods-component='Table']) th {
+  color: var(--sys-text-muted, GrayText);
+  font-weight: var(--sys-text-scale-label-font-weight, 500);
 }
-/* A row's action is the browser's own button, which otherwise takes the platform's font. */
-:where(.oods-table-row-action) { font: inherit; }
+:where(.oods-table, [data-oods-component='Table']) :is(th, td)[data-numeric='true'] { text-align: end; font-variant-numeric: tabular-nums; }
+:where(.oods-table, [data-oods-component='Table']) tbody > tr:last-child > :is(th, td) { border-block-end: 0; }
+:where(.oods-table, [data-oods-component='Table']) tbody > tr[data-selectable='true']:hover { background: var(--sys-surface-subtle, Canvas); }
+/* A caption hidden on request stays the table's accessible name. */
+:where(.oods-table, [data-oods-component='Table']) > caption[data-visually-hidden='true'] { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+:where(.oods-table, [data-oods-component='Table']) > caption {
+  padding: var(--sys-inset-sm, 0.75rem) var(--oods-table-cell-padding-inline);
+  border-block-end: 1px solid var(--cmp-border-default, currentColor);
+  color: var(--sys-text-primary, CanvasText);
+  font-weight: var(--sys-text-scale-heading-sm-font-weight, 600);
+  text-align: start;
+}
+/* A row's action is its first cell's text as a ghost button: no fill and no border, 500 weight, underlined on hover; the
+ * shared rule paints its focus. */
+:where(.oods-table-row-action) {
+  padding: 0;
+  border: 0;
+  border-radius: var(--sys-radius-control-sm, 4px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--sys-text-scale-label-font-weight, 500);
+  text-align: start;
+  text-underline-offset: 0.25em;
+  cursor: pointer;
+}
+:where(.oods-table-row-action):hover { text-decoration: underline; }
+/* s222-m02 (#2502 rulings 8 and 11): a tab is the label role (14/20 500; 16/24 at lg) in the secondary text colour; the
+ * selected tab takes the primary text and a 2px indicator in the brand's primary fill, laid over the list's hairline. */
 :where(.oods-tabs, [data-oods-component='Tabs']) {
-  --oods-tabs-font-size: var(--sys-text-size-md, 1rem);
+  --oods-tabs-font-size: var(--sys-text-scale-label-font-size, 14px);
+  --oods-tabs-line-height: var(--sys-text-scale-label-line-height, 20px);
   --oods-tabs-padding-block: var(--cmp-tabs-padding-block, 0.625rem);
   --oods-tabs-padding-inline: var(--cmp-tabs-padding-inline, 0.75rem);
   color: var(--cmp-text-body, CanvasText);
 }
 :where(.oods-tabs, [data-oods-component='Tabs'])[data-size='sm'] {
-  --oods-tabs-font-size: var(--sys-text-size-sm, 0.875rem);
   --oods-tabs-padding-block: var(--cmp-tabs-padding-block-sm, 0.5rem);
   --oods-tabs-padding-inline: var(--cmp-tabs-padding-inline-sm, 0.625rem);
 }
 :where(.oods-tabs, [data-oods-component='Tabs'])[data-size='md'] {
-  --oods-tabs-font-size: var(--sys-text-size-md, 1rem);
   --oods-tabs-padding-block: var(--cmp-tabs-padding-block, 0.625rem);
   --oods-tabs-padding-inline: var(--cmp-tabs-padding-inline, 0.75rem);
 }
 :where(.oods-tabs, [data-oods-component='Tabs'])[data-size='lg'] {
-  --oods-tabs-font-size: var(--sys-text-size-lg, 1.25rem);
+  --oods-tabs-font-size: var(--sys-text-scale-body-md-font-size, 16px);
+  --oods-tabs-line-height: var(--sys-text-scale-body-md-line-height, 24px);
   --oods-tabs-padding-block: var(--cmp-tabs-padding-block-lg, 0.75rem);
   --oods-tabs-padding-inline: var(--cmp-tabs-padding-inline-lg, 1rem);
 }
@@ -892,15 +1202,17 @@
   gap: var(--sys-control-gap-compact, 0.25rem);
   padding: var(--sys-control-gap-compact, 0.25rem);
   border: 1px solid var(--cmp-border-default, currentColor);
-  border-radius: var(--cmp-button-radius, 0.5rem);
+  border-radius: var(--sys-radius-control-lg, 8px);
   background: var(--cmp-surface-panel, Canvas);
-  box-shadow: var(--cmp-shadow-overlay-offset-x, 0px) var(--cmp-shadow-overlay-offset-y, 24px) var(--cmp-shadow-overlay-blur, 56px) var(--cmp-shadow-overlay-spread, -16px) var(--cmp-shadow-overlay-color, rgba(15, 23, 42, 0.24));
+  box-shadow: var(--cmp-shadow-overlay-offset-x, 0px) var(--cmp-shadow-overlay-offset-y, 8px) var(--cmp-shadow-overlay-blur, 16px) var(--cmp-shadow-overlay-spread, -4px) var(--cmp-shadow-overlay-color, rgba(15, 23, 42, 0.24));
 }
-.oods-tab-list { display: flex; gap: var(--cmp-spacing-inline-xs, 0.5rem); overflow-x: auto; border-block-end: 1px solid var(--cmp-border-default, currentColor); }
-.oods-tab { padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); border: 0; border-block-end: var(--cmp-tabs-indicator-width, 0.1875rem) solid transparent; background: transparent; color: inherit; font: inherit; font-size: var(--oods-tabs-font-size); line-height: var(--sys-text-line-height-standard, 1.4); }
-:where(.oods-tabs-overflow-trigger, .tabs__overflow-trigger) { padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); font: inherit; font-size: var(--oods-tabs-font-size); line-height: var(--sys-text-line-height-standard, 1.4); }
-.oods-tab[aria-selected='true'] { border-block-end-color: var(--cmp-text-accent, Highlight); font-weight: var(--ref-typography-weights-semibold, 600); }
+.oods-tab-list { display: flex; gap: 0; overflow-x: auto; border-block-end: 1px solid var(--cmp-border-default, currentColor); }
+.oods-tab { margin-block-end: -1px; padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); border: 0; border-block-end: var(--cmp-tabs-indicator-width, 0.125rem) solid transparent; background: transparent; color: var(--sys-text-secondary, CanvasText); font: inherit; font-size: var(--oods-tabs-font-size); font-weight: var(--sys-text-scale-label-font-weight, 500); line-height: var(--oods-tabs-line-height); cursor: pointer; }
+.oods-tab:hover:not(:disabled) { color: var(--sys-text-primary, CanvasText); }
+.oods-tab:disabled { color: var(--sys-text-disabled, GrayText); cursor: not-allowed; }
+:where(.oods-tabs-overflow-trigger, .tabs__overflow-trigger) { padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); font: inherit; font-size: var(--oods-tabs-font-size); font-weight: var(--sys-text-scale-label-font-weight, 500); line-height: var(--oods-tabs-line-height); }
+.oods-tab[aria-selected='true'] { border-block-end-color: var(--sys-surface-interactive-primary-default, Highlight); color: var(--sys-text-primary, CanvasText); }
 .oods-tab-panel { padding-block: var(--cmp-spacing-stack-default, 1rem); }
 :where(.oods-text, [data-oods-component='Text']) {
@@ -908,18 +1220,19 @@
   font: inherit;
 }
+/* s222-m02 (#2502 ruling 8): the small and medium text sizes are the body roles, 14/20 and 16/24. */
 :where(.oods-text, [data-oods-component='Text'])[data-size='sm'] {
-  font-size: var(--sys-text-size-sm, 0.875rem);
-  line-height: var(--sys-text-line-height-relaxed, 1.5);
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
 :where(.oods-text, [data-oods-component='Text'])[data-size='md'] {
-  font-size: var(--sys-text-size-md, 1rem);
-  line-height: var(--sys-text-line-height-relaxed, 1.5);
+  font-size: var(--sys-text-scale-body-md-font-size, 16px);
+  line-height: var(--sys-text-scale-body-md-line-height, 24px);
 }
 :where(.oods-text, [data-oods-component='Text'])[data-size='lg'] {
-  font-size: var(--sys-text-size-lg, 1.25rem);
+  font-size: var(--sys-text-size-lg, 18px);
   line-height: var(--sys-text-line-height-standard, 1.4);
 }
@@ -960,6 +1273,10 @@
     border-color: CanvasText;
     background: CanvasText;
   }
+  :where([data-oods-component='ColorizedBadge'], [data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'], .oods-badge, [data-oods-component='RoleBadgeList'] [data-role-badge], [data-oods-component='TagPills'] :is([data-tag-pill], [data-tag-overflow])) {
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
 }
 /* s221-m02 (#2482 ruling 4): a theme works in any element, so an hc rule reaches only what hc themes most closely:
@@ -970,6 +1287,12 @@
   color: CanvasText;
 }
+/* s222-m02 (#2502 ruling 11): the badge families have no border, so their high-contrast outline is drawn inside the
+ * pill, as the Badge's is. */
+[data-theme='hc'] :where([data-oods-component='ColorizedBadge'], [data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'], [data-oods-component='RoleBadgeList'] [data-role-badge], [data-oods-component='TagPills'] :is([data-tag-pill], [data-tag-overflow]), [data-oods-component='StatusBadge'], [data-oods-component='PriceBadge']):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  box-shadow: inset 0 0 0 1px CanvasText;
+}
 [data-theme='hc'] :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip]:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)),
 [data-theme='hc'] :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker]:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: CanvasText;
@@ -982,21 +1305,41 @@
  * HighlightText (which is only guaranteed against a Highlight background).
  */
 [data-theme='hc'] :where(
-  .oods-badge,
-  [data-oods-component='Badge'],
   .oods-banner,
   [data-oods-component='Banner']
 ):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
-  border-color: Highlight;
+  border-color: CanvasText;
   background: Canvas;
   color: CanvasText;
 }
+/* s222-m02 (#2502 rulings 6 and 11): a badge has no border, so in high contrast its outline is drawn inside its box and
+ * the 20px height holds; subtle and solid both read CanvasText on Canvas. */
+[data-theme='hc'] :where(
+  .oods-badge,
+  [data-oods-component='Badge']
+):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  background: Canvas;
+  color: CanvasText;
+  box-shadow: inset 0 0 0 1px CanvasText;
+}
 [data-theme='hc'] .oods-field-error:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   color: CanvasText;
 }
+/* s222-m02: the banner's ghost dismiss takes the CanvasText outline every non-primary action has in high contrast. */
+[data-theme='hc'] .oods-banner-dismiss:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) { border-color: CanvasText; }
+/* s222-m01 (#2502 ruling 6): in high contrast only the primary action is Highlight on HighlightText; every other intent is
+ * Canvas and CanvasText with a 1px CanvasText border, so the intents stay apart. */
 [data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  border-color: CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='primary']:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: Highlight;
   background: Highlight;
   color: HighlightText;
@@ -1031,34 +1374,35 @@
   display: inline-flex;
   align-items: center;
   gap: var(--cmp-badge-gap, 0.25rem);
-  min-block-size: var(--cmp-badge-height, 1.5rem);
+  min-block-size: var(--cmp-badge-height, 1.25rem);
   box-sizing: border-box;
   padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
-  border: 1px solid var(--cmp-badge-border, var(--cmp-border-default, currentColor));
+  border: 0;
   border-radius: var(--cmp-badge-radius, 999px);
   background: var(--cmp-badge-background, var(--cmp-surface-subtle, transparent));
   color: var(--cmp-badge-text, var(--cmp-text-body, currentColor));
-  font-size: var(--cmp-badge-font-size, 0.875rem);
-  font-weight: var(--cmp-badge-font-weight, 600);
-  line-height: var(--sys-text-line-height-tight, 1.2);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
+  white-space: nowrap;
 }
-:where([data-oods-component='StatusBadge'])[data-status='active'],
-:where([data-oods-component='StatusBadge'])[data-status='success'] {
+:where([data-oods-component='StatusBadge'])[data-status='active']:not([data-tone]),
+:where([data-oods-component='StatusBadge'])[data-status='success']:not([data-tone]) {
   --cmp-badge-background: var(--sys-status-success-surface, Canvas);
   --cmp-badge-border: var(--sys-status-success-border, currentColor);
   --cmp-badge-text: var(--sys-status-success-text, CanvasText);
 }
-:where([data-oods-component='StatusBadge'])[data-status='past_due'],
-:where([data-oods-component='StatusBadge'])[data-status='warning'] {
+:where([data-oods-component='StatusBadge'])[data-status='past_due']:not([data-tone]),
+:where([data-oods-component='StatusBadge'])[data-status='warning']:not([data-tone]) {
   --cmp-badge-background: var(--sys-status-warning-surface, Canvas);
   --cmp-badge-border: var(--sys-status-warning-border, currentColor);
   --cmp-badge-text: var(--sys-status-warning-text, CanvasText);
 }
-:where([data-oods-component='StatusBadge'])[data-status='cancelled'],
-:where([data-oods-component='StatusBadge'])[data-status='error'] {
+:where([data-oods-component='StatusBadge'])[data-status='cancelled']:not([data-tone]),
+:where([data-oods-component='StatusBadge'])[data-status='error']:not([data-tone]) {
   --cmp-badge-background: var(--sys-status-critical-surface, Canvas);
   --cmp-badge-border: var(--sys-status-critical-border, currentColor);
   --cmp-badge-text: var(--sys-status-critical-text, CanvasText);
@@ -1094,9 +1438,9 @@
 :where([data-oods-component='CancellationSummary']) {
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-border-default, currentColor);
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-surface-panel, Canvas);
   color: var(--cmp-text-body, CanvasText);
 }
@@ -1125,26 +1469,45 @@
 :where([data-oods-component='SearchInput']) input[type='search'] {
   inline-size: 100%;
   box-sizing: border-box;
-  padding: var(--cmp-input-padding-block, 0.625rem) var(--cmp-input-padding-inline, 0.75rem);
+  min-block-size: var(--sys-control-height-md, 2rem);
+  padding: 0 var(--cmp-input-padding-inline, 0.75rem);
   border: 1px solid var(--cmp-input-border, var(--cmp-border-default, currentColor));
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-input-radius, 6px);
   background: var(--cmp-input-background, Canvas);
   color: var(--cmp-input-text, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
 }
+/* s222-m02 (#2502 ruling 11): search and pagination buttons are the outline button at the control height; a page
+ * number is square. */
 :where([data-oods-component='SearchInput']) button,
 :where([data-oods-component='PaginationBar']) button {
   display: inline-flex;
-  min-inline-size: var(--cmp-button-height, 2.5rem);
-  min-block-size: var(--cmp-button-height, 2.5rem);
+  box-sizing: border-box;
+  min-inline-size: var(--cmp-button-height, 2rem);
+  min-block-size: var(--cmp-button-height, 2rem);
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--cmp-button-border, var(--cmp-border-default, currentColor));
-  border-radius: var(--cmp-button-radius, 0.5rem);
-  background: var(--cmp-button-background, Canvas);
-  color: var(--cmp-button-text, CanvasText);
+  padding: 0 var(--cmp-button-padding-inline-sm, 0.625rem);
+  border: 1px solid var(--sys-border-strong, CanvasText);
+  border-radius: var(--cmp-button-radius, 6px);
+  background: var(--sys-surface-raised, Canvas);
+  color: var(--sys-text-primary, CanvasText);
   font: inherit;
+  font-size: var(--sys-text-scale-label-font-size, 14px);
+  font-weight: var(--sys-text-scale-label-font-weight, 500);
+  line-height: var(--sys-text-scale-label-line-height, 20px);
+  cursor: pointer;
+}
+:where([data-oods-component='SearchInput'], [data-oods-component='PaginationBar']) button:hover:not(:disabled) { background: var(--sys-surface-interactive-secondary-default, Canvas); }
+:where([data-oods-component='SearchInput'], [data-oods-component='PaginationBar']) button > svg { flex: none; inline-size: var(--sys-control-icon-size, 1rem); block-size: var(--sys-control-icon-size, 1rem); }
+:where([data-oods-component='PaginationBar']) button[aria-current='page'] {
+  border-color: transparent;
+  background: var(--sys-surface-interactive-primary-default, Highlight);
+  color: var(--sys-text-on-interactive, HighlightText);
 }
 :where([data-oods-component='PaginationBar']) {
@@ -1156,6 +1519,8 @@
 }
 :where([data-oods-component='PaginationBar']) button:disabled {
+  border-color: var(--sys-border-subtle, GrayText);
+  background: var(--sys-surface-disabled, Canvas);
   color: var(--cmp-button-text-disabled, GrayText);
   cursor: not-allowed;
 }
@@ -1257,18 +1622,21 @@
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
-  padding: var(--space-2) var(--space-3);
+  min-block-size: var(--sys-control-height-md);
+  padding: 0 var(--space-3);
   font: inherit;
+  font-size: var(--sys-text-scale-body-sm-font-size);
+  line-height: var(--sys-text-scale-body-sm-line-height);
   color: inherit;
-  background: var(--sys-surface-default);
-  border: 1px solid var(--sys-border-default);
+  background: var(--sys-surface-raised);
+  border: 1px solid var(--sys-border-interactive);
   border-radius: var(--radius-md);
 }
 :where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > select {
   color: var(--cmp-billing-interval-text, var(--sys-text-subtle));
 }
 :where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > [aria-invalid='true'] {
-  border-color: var(--sys-status-critical-border);
+  border-color: var(--sys-status-critical-icon);
 }
 :where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > [role='alert'] {
   color: var(--sys-status-critical-text);
@@ -1279,30 +1647,31 @@
 [data-oods-component='CycleProgressCard'],
 :where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) {
   min-width: 0;
-  padding: var(--space-4, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--sys-border-default, GrayText);
-  border-radius: var(--radius-md, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--sys-surface-default, Canvas);
   color: var(--cmp-billing-timeline-text, var(--sys-text-default, CanvasText));
 }
 [data-oods-component='CycleProgressCard'] h2,
-:where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) h2 { margin: 0 0 var(--space-3, 0.75rem); }
+:where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) h2 { margin: 0 0 var(--space-3, 0.75rem); font-size: var(--sys-text-scale-heading-md-font-size, 18px); font-weight: var(--sys-text-scale-heading-md-font-weight, 600); line-height: var(--sys-text-scale-heading-md-line-height, 24px); }
 [data-oods-component='CycleProgressCard'] p,
 :where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) p { margin: var(--space-2, 0.5rem) 0; }
 /* s213-m01: the track takes the border role, so the whole cycle reads against the card in both themes (raised surface
-   was whiter than the light card, 1.04:1) while the accent fill keeps at least 3:1 against it. */
+   was whiter than the light card, 1.04:1) while the accent fill keeps at least 3:1 against it. s222-m01: the strong
+   border, since the neutral-first subtle border (#e5e5e5) is 1.26:1 on a white card. */
 [data-oods-component='CycleProgressCard'] progress {
   width: 100%;
   height: var(--cmp-billing-cycle-progress-height, 0.5rem);
   appearance: none;
   border: 0;
-  border-radius: var(--sys-radius-control, 0.5rem);
+  border-radius: var(--sys-radius-control, 6px);
   overflow: hidden;
-  background: var(--sys-border-default, Canvas);
+  background: var(--sys-border-strong, Canvas);
   color: var(--cmp-billing-cycle-progress-fill, var(--sys-text-accent, Highlight));
 }
 [data-oods-component='CycleProgressCard'] progress::-webkit-progress-bar {
-  background: var(--sys-border-default, Canvas);
+  background: var(--sys-border-strong, Canvas);
 }
 [data-oods-component='CycleProgressCard'] progress::-webkit-progress-value {
   background: var(--cmp-billing-cycle-progress-fill, var(--sys-text-accent, Highlight));
@@ -1338,17 +1707,24 @@
 [data-oods-component='ArchivedRowOverlay'][data-archived='true']:has(> .oods-collection-row) {
   box-sizing: border-box;
   border: 1px solid var(--sys-border-strong, CanvasText);
-  border-radius: var(--cmp-button-radius, 0.5rem);
+  border-radius: var(--cmp-button-radius, 6px);
   background: var(--sys-surface-raised, Canvas);
   padding-inline-end: var(--space-4, 1rem);
 }
 [data-oods-component='ArchivedRowOverlay'][data-archived='true'] > .oods-collection-row { border: 0; background: transparent; }
+/* s222-m02 (#2502 ruling 11): the archive mark is a badge: a 20px pill at 12/500. */
 .oods-archive-badge {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-block-size: var(--cmp-badge-height, 1.25rem);
   white-space: nowrap;
   flex-shrink: 0;
-  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
-  border-radius: var(--radius-sm, 0.5rem);
+  padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
+  border-radius: var(--cmp-badge-radius, 999px);
+  font-size: var(--cmp-badge-font-size, 12px);
+  font-weight: var(--cmp-badge-font-weight, 500);
+  line-height: var(--sys-text-scale-caption-line-height, 16px);
   color: var(--status-archive-text, var(--sys-text-primary));
   background: var(--status-archive-bg, var(--sys-surface-raised));
 }
@@ -1360,7 +1736,8 @@
 }
 [data-oods-component='CancellationSummary'] [data-summary-item] { min-width: 0; }
 [data-oods-component='CancellationSummary'] dd { margin: 0; overflow-wrap: break-word; }
-.oods-field-help { display: block; margin: var(--cmp-input-gap, 0.375rem) 0 var(--cmp-spacing-stack-md, 1rem); font-size: var(--sys-text-size-sm, 0.875rem); color: var(--sys-text-subtle, GrayText); }
+/* s222-m02 (#2502 ruling 11): help text is muted at 14/20 and spaced by its field's gap, not by margins of its own. */
+.oods-field-help { display: block; margin: 0; font-size: var(--sys-text-scale-body-sm-font-size, 14px); line-height: var(--sys-text-scale-body-sm-line-height, 20px); color: var(--sys-text-muted, GrayText); }
 .oods-cancellation-form { margin: 0; min-width: 0; }
 .oods-field:has(input[type='checkbox']) { display: block; }
 .oods-field label:has(input[type='checkbox']) { display: flex; flex-direction: row; align-items: center; gap: var(--cmp-checkbox-gap, 0.5rem); }
@@ -1375,8 +1752,9 @@
 .workflow-content [data-oods-collection-toolbar] > [data-oods-component='Select'],
 .workflow-content [data-oods-collection-toolbar] > .oods-field:has(select) { flex: 1 1 180px; min-width: min(180px, 100%); }
 [data-oods-collection-toolbar] select { width: 100%; box-sizing: border-box; }
-[data-oods-component='Stack']:has(> [data-oods-collection-toolbar]) { font-family: var(--ref-typography-families-sans, system-ui, sans-serif); }
-.oods-collection-row { --oods-button-background: var(--sys-surface-raised); --oods-button-background-hover: var(--sys-surface-subtle); --oods-button-border: var(--sys-border-subtle); --oods-button-text: var(--sys-text-primary); width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); text-align: left; padding: var(--cmp-spacing-inset-default, 1rem); }
+/* s222-m02: the toolbar's stack reads in the brand's own sans (it named the shared reference family, which is not brand B's). */
+[data-oods-component='Stack']:has(> [data-oods-collection-toolbar]) { font-family: var(--sys-font-sans); }
+.oods-collection-row { --oods-button-background: var(--sys-surface-raised); --oods-button-background-hover: var(--sys-surface-subtle); --oods-button-border: var(--sys-border-subtle); --oods-button-text: var(--sys-text-primary); width: 100%; display: flex; flex-wrap: wrap; white-space: normal; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); text-align: left; padding: var(--cmp-spacing-inset-default, 1rem); }
 [data-theme='hc'] .oods-collection-row:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) { background: var(--sys-surface-raised); color: var(--sys-text-primary); }
 .oods-collection-row > :first-child { min-width: 0; flex: 1 1 140px; font-weight: var(--ref-typography-weights-semibold, 600); }
 .oods-collection-row .oods-badge { max-width: 100%; width: fit-content; flex: 0 0 auto; text-transform: none; letter-spacing: normal; }
@@ -1384,16 +1762,16 @@
 .oods-pagination-bar__pages { display: flex; gap: var(--sys-control-gap-tight, 0.375rem); list-style: none; margin: 0; padding: 0; }
 @media (max-width: 600px) { .oods-collection-row { flex-direction: column; align-items: flex-start; } .oods-collection-row > :first-child { flex-basis: auto; width: 100%; } }
-:where(.oods-audit-summary, [data-oods-component='AuditSummaryCard']) { padding: var(--cmp-spacing-inset-default); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); background: var(--cmp-surface-panel); color: var(--cmp-text-body); }
-.oods-audit-summary h2 { margin-top: 0; }
+:where(.oods-audit-summary, [data-oods-component='AuditSummaryCard']) { padding: var(--sys-card-padding); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-card-radius); background: var(--cmp-surface-panel); color: var(--cmp-text-body); }
+.oods-audit-summary h2 { margin-top: 0; font-size: var(--sys-text-scale-heading-md-font-size); font-weight: var(--sys-text-scale-heading-md-font-weight); line-height: var(--sys-text-scale-heading-md-line-height); }
 .oods-audit-summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--cmp-spacing-inline-sm); }
 .oods-audit-summary dd { margin: 0; }
 :where(.oods-sort-indicator, [data-oods-component='SortIndicator']) { border-collapse: collapse; color: var(--cmp-text-body); }
-.oods-sort-indicator button { padding: var(--cmp-spacing-inline-sm); background: var(--cmp-surface-panel); color: var(--cmp-text-body); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); font: inherit; cursor: pointer; }
+.oods-sort-indicator button { box-sizing: border-box; min-block-size: var(--cmp-button-height-sm); padding: 0 var(--cmp-button-padding-inline-sm); background: var(--sys-surface-raised); color: var(--cmp-text-body); border: 1px solid var(--sys-border-strong); border-radius: var(--cmp-button-radius); font: inherit; font-size: var(--sys-text-scale-label-font-size); font-weight: var(--sys-text-scale-label-font-weight); line-height: var(--sys-text-scale-label-line-height); cursor: pointer; }
 [data-oods-component='TimelineEntryLabel'] { color: var(--cmp-text-body); }
-.oods-trait-recipe, :where([data-oods-component='ArchiveEvent'], [data-oods-component='CancellationEvent'], [data-oods-component='ColorStatePicker'], [data-oods-component='CommunicationDetailPanel'], [data-oods-component='GeoFieldMappingForm'], [data-oods-component='GeocodablePreview'], [data-oods-component='StateTransitionEvent'], [data-oods-component='StatusColorLegend'], [data-oods-component='VizAreaControls'], [data-oods-component='VizAxisControls'], [data-oods-component='VizAxisSummary'], [data-oods-component='VizColorControls'], [data-oods-component='VizColorLegendConfig'], [data-oods-component='VizHeatmapControls'], [data-oods-component='VizLineControls'], [data-oods-component='VizMarkControls'], [data-oods-component='VizOpacityControls'], [data-oods-component='VizOpacitySummary'], [data-oods-component='VizPointControls'], [data-oods-component='VizScaleControls'], [data-oods-component='VizScaleSummary'], [data-oods-component='VizScatterControls'], [data-oods-component='VizShapeControls'], [data-oods-component='VizShapeLegend'], [data-oods-component='VizSizeControls'], [data-oods-component='VizSizeSummary']) { min-width: 0; margin: 0; padding: var(--cmp-spacing-inset-default); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); background: var(--cmp-surface-panel); color: var(--cmp-text-body); overflow-wrap: anywhere; }
-.oods-trait-recipe h2 { margin-top: 0; }
+.oods-trait-recipe, :where([data-oods-component='ArchiveEvent'], [data-oods-component='CancellationEvent'], [data-oods-component='ColorStatePicker'], [data-oods-component='CommunicationDetailPanel'], [data-oods-component='GeoFieldMappingForm'], [data-oods-component='GeocodablePreview'], [data-oods-component='StateTransitionEvent'], [data-oods-component='StatusColorLegend'], [data-oods-component='VizAreaControls'], [data-oods-component='VizAxisControls'], [data-oods-component='VizAxisSummary'], [data-oods-component='VizColorControls'], [data-oods-component='VizColorLegendConfig'], [data-oods-component='VizHeatmapControls'], [data-oods-component='VizLineControls'], [data-oods-component='VizMarkControls'], [data-oods-component='VizOpacityControls'], [data-oods-component='VizOpacitySummary'], [data-oods-component='VizPointControls'], [data-oods-component='VizScaleControls'], [data-oods-component='VizScaleSummary'], [data-oods-component='VizScatterControls'], [data-oods-component='VizShapeControls'], [data-oods-component='VizShapeLegend'], [data-oods-component='VizSizeControls'], [data-oods-component='VizSizeSummary']) { min-width: 0; margin: 0; padding: var(--sys-card-padding); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-card-radius); background: var(--cmp-surface-panel); color: var(--cmp-text-body); overflow-wrap: anywhere; }
+.oods-trait-recipe h2 { margin-top: 0; font-size: var(--sys-text-scale-heading-md-font-size); font-weight: var(--sys-text-scale-heading-md-font-weight); line-height: var(--sys-text-scale-heading-md-line-height); }
 .oods-trait-recipe dd { margin: 0 0 var(--cmp-spacing-inline-sm); }
 .oods-trait-recipe dt { font-weight: var(--ref-typography-weights-semibold, 600); }
 .oods-trait-recipe .oods-field { margin-block: var(--cmp-spacing-inline-sm); }
@@ -1403,7 +1781,7 @@
 /* Producer-owned read fields stay labelled and readable in every context. */
 [data-oods-component='Stack'][id$='-read-field'] { gap: var(--sys-control-gap-compact, 0.25rem); min-width: 0; }
-[data-oods-component='Stack'][id$='-read-fields'] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sys-space-scale-lg, 1.25rem); }
+[data-oods-component='Stack'][id$='-read-fields'] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sys-space-scale-lg, 24px); }
 [data-oods-component='Stack'][id$='-read-fields'] > :not([id$='-read-field']) { grid-column: 1 / -1; }
 [data-oods-component='Stack'][id$='-read-field'] > :first-child { color: var(--sys-text-secondary); }
 [data-oods-component='Stack'][id$='-read-field'] > :last-child { overflow-wrap: anywhere; align-self: flex-start; max-width: 100%; }
@@ -1427,9 +1805,9 @@
 :where([data-oods-component='CancellationSummary']) {
   display: grid;
   gap: var(--cmp-spacing-stack-sm, 0.75rem);
-  padding: var(--cmp-spacing-inset-default, 1rem);
+  padding: var(--sys-card-padding, 1.5rem);
   border: 1px solid var(--cmp-border-default, var(--sys-border-subtle));
-  border-radius: var(--cmp-input-radius, 0.5rem);
+  border-radius: var(--cmp-card-radius, 0.75rem);
   background: var(--cmp-surface-panel, var(--sys-surface-raised));
   color: var(--cmp-text-body, var(--sys-text-primary));
 }
@@ -1445,7 +1823,17 @@
 div.oods-field[data-oods-component='Checkbox'] { display: grid; grid-template-columns: minmax(0, 1fr); }
 .oods-field.oods-checkbox > label,
 .oods-field > label.oods-checkbox { display: flex; align-items: center; gap: var(--cmp-checkbox-gap, 0.5rem); }
-input[data-oods-component='Checkbox'], .oods-field input[type='checkbox'] { margin: 0; flex: 0 0 auto; inline-size: var(--cmp-input-height, 3rem); block-size: var(--cmp-input-height, 3rem); }
+/* s222-m02 (#2502 ruling 9): a checkbox or radio is 16px, the control icon size, in every component; its help text lines up
+ * with its label. (It read an undefined --cmp-input-height and fell back to 48px.) */
+:is(input[data-oods-component='Checkbox'], [data-oods-component] input:is([type='checkbox'], [type='radio']), .oods-field input:is([type='checkbox'], [type='radio'])) {
+  margin: 0;
+  flex: 0 0 auto;
+  inline-size: var(--sys-control-icon-size, 1rem);
+  block-size: var(--sys-control-icon-size, 1rem);
+  accent-color: var(--cmp-checkbox-background-checked, Highlight);
+}
+.oods-field.oods-checkbox > .oods-field-help,
+.oods-field.oods-checkbox > .oods-field-error { padding-inline-start: calc(var(--sys-control-icon-size, 1rem) + var(--cmp-checkbox-gap, 0.5rem)); }
 .workflow-field > input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
 /* Catalog choices may have long labels; form grids must shrink with their screen. */
@@ -1457,11 +1845,13 @@ input[data-oods-component='Checkbox'], .oods-field input[type='checkbox'] { marg
  * places by the page gutter, and the composer's page-level regions carry no side padding of their own, so a heading,
  * the controls under it and the cards below share one edge. The page's own heading reads as a detail page's does. */
 [data-oods-shell] { display: block; box-sizing: border-box; padding: var(--sys-page-gutter, 1.5rem); }
+/* s222-m02 (#2502 ruling 8): the page title is heading-xl (30/36 600), as a detail page's is. */
 [data-oods-shell-heading] {
-  margin: 0 0 var(--sys-stack-md, 1rem);
-  font-size: var(--sys-text-scale-heading-lg-font-size, 1.5rem);
-  font-weight: var(--ref-typography-weights-semibold, 600);
-  line-height: var(--sys-text-scale-heading-lg-line-height, 1.2);
+  margin: 0 0 var(--sys-stack-lg, 1.5rem);
+  font-size: var(--sys-text-scale-heading-xl-font-size, 30px);
+  font-weight: var(--sys-text-scale-heading-xl-font-weight, 600);
+  line-height: var(--sys-text-scale-heading-xl-line-height, 36px);
+  letter-spacing: var(--sys-text-scale-heading-xl-letter-spacing);
 }
 /* s211-m02: a tab label never breaks inside a word ("Ru/n" at 390); a list with more tabs than fit scrolls instead, and
@@ -1473,6 +1863,7 @@ input[data-oods-component='Checkbox'], .oods-field input[type='checkbox'] { marg
  * event (on the event, not also on its list item) and a quieter time under its label. The frozen block above stays. */
 :where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) { gap: var(--sys-stack-sm, 0.75rem); }
 :where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) > :is(h2, p) { margin: 0; }
+:where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) > h2 { font-size: var(--sys-text-scale-heading-md-font-size, 18px); font-weight: var(--sys-text-scale-heading-md-font-weight, 600); line-height: var(--sys-text-scale-heading-md-line-height, 24px); }
 :where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) ol { list-style: none; padding-inline-start: 0; }
 :where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) li { border-inline-start: 0; padding-inline-start: 0; }
 :where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) article {
@@ -1502,12 +1893,125 @@ input[data-oods-component='Checkbox'], .oods-field input[type='checkbox'] { marg
 [data-oods-reference-inspection] code { overflow-wrap: anywhere; }
 /* A destructive action remains distinguishable when every action uses the
- * user's HC system colors: shape and a warning glyph carry the distinction. */
-[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
-  border: 3px double CanvasText;
+ * user's HC system colors: a warning glyph carries the distinction (s222-m01: with the 1px CanvasText border every
+ * non-primary intent has; s222-m02: the destructive variant too, which shares danger's fill). */
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):is([data-intent='danger'], [data-intent='destructive']):not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  border: 1px solid CanvasText;
   background: Canvas;
   color: CanvasText;
 }
-[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *))::before {
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):is([data-intent='danger'], [data-intent='destructive']):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *))::before {
   content: "⚠" / "";
 }
+/* ─── s222-m02 F7 (#2502 ruling 12): a placed chart follows the theme ─────────────────────────────────────────────────
+ * A placed chart carries its renders in each theme, each set in a [data-viz-theme] wrapper (vizPreviewLayers in
+ * @oods/component-contracts; the wrapper repeats data-viz-narrow and data-viz-wide, so the size rules above apply inside
+ * it). Each [data-theme] names its theme for the charts under it, and custom properties inherit, so the nearest
+ * [data-theme] decides: dark shows the dark renders, hc the hc ones, any other theme the light ones. With no [data-theme]
+ * on the page the light renders show. A chart without dark or hc renders has no wrapper and shows in every theme. */
+:where([data-theme]) { --oods-viz-show-light: block; --oods-viz-show-dark: none; --oods-viz-show-hc: none; }
+:where([data-theme='dark']) { --oods-viz-show-light: none; --oods-viz-show-dark: block; }
+:where([data-theme='hc']) { --oods-viz-show-light: none; --oods-viz-show-hc: block; }
+:where([data-viz-theme]) { min-inline-size: 0; }
+:where([data-viz-theme='light']) { display: var(--oods-viz-show-light, block); }
+:where([data-viz-theme='dark']) { display: var(--oods-viz-show-dark, none); }
+:where([data-viz-theme='hc']) { display: var(--oods-viz-show-hc, none); }
+/* ─── end s222-m02 F7 ──────────────────────────────────────────────────────────────────────────────────────────────── */
+/* ─── s222-m03 (#2502 ruling 13): screens read as a product ──────────────────────────────────────────────────────────
+ * A detail page's header: the record's title and its summary (status and key meta) on the left and the screen's actions
+ * on the right, on one row from 48rem; the sections below it take the full width. The generated stack sets its own
+ * display inline, so the grid is set here with !important, as the read-only rows' columns are (s221-m02). */
+@media (min-width: 48rem) {
+  [data-oods-component='Stack']:has(> [data-oods-component='DetailHeader']):has(> .oods-action-bar) {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+  }
+  [data-oods-component='Stack']:has(> [data-oods-component='DetailHeader']):has(> .oods-action-bar) > * { grid-column: 1 / -1; }
+  [data-oods-component='Stack']:has(> [data-oods-component='DetailHeader']):has(> .oods-action-bar) > [data-oods-component='DetailHeader'] { grid-column: 1; grid-row: 1; }
+  [data-oods-component='Stack']:has(> [data-oods-component='DetailHeader']):has(> .oods-action-bar) > [data-oods-component='Stack'][id$='-record-summary'] { grid-column: 1; grid-row: 2; }
+  [data-oods-component='Stack']:has(> [data-oods-component='DetailHeader']):has(> .oods-action-bar) > .oods-action-bar { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
+}
+/* Never a card inside a card: a panel placed inside a card (a tab panel's billing cycle or payments, a summary in a
+ * card's body) is a section of that card. It keeps its heading and content and drops its own border, fill, radius and
+ * inset; the card's gap separates it from its neighbours. */
+:where(.oods-card, [data-oods-component='Card']) :is(.oods-card, [data-oods-component='Card'], [data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel'], [data-oods-component='FilterPanel'], [data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary'], [data-oods-component='CancellationSummary'], [data-oods-component='AuditSummaryCard'], [data-oods-component='CycleProgressCard'], [data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], .oods-trait-recipe) {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+/* A list reads as one list: its rows sit in one bordered container on the raised surface, divided by hairlines. A row
+ * is the record's title (500) over its muted secondary line on the left, then its status, meta and time, which the
+ * title's growth pushes to the right. */
+[data-oods-collection='rows'] > .oods-collection {
+  gap: 0;
+  border: 1px solid var(--sys-border-subtle, CanvasText);
+  border-radius: var(--sys-radius-control-lg, 8px);
+  background: var(--sys-surface-raised, Canvas);
+  overflow: hidden;
+}
+[data-oods-collection='rows'] > .oods-collection > li:not(:last-child) { border-block-end: 1px solid var(--sys-border-subtle, CanvasText); }
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row {
+  --oods-button-border: transparent;
+  --oods-button-background: transparent;
+  --oods-button-background-hover: var(--sys-surface-subtle, Canvas);
+  --oods-button-background-pressed: var(--sys-surface-interactive-secondary-default, Canvas);
+  justify-content: flex-start;
+  padding: var(--sys-inset-sm, 0.75rem) var(--sys-inset-md, 1rem);
+  border-radius: 0;
+  font-weight: var(--sys-text-scale-body-sm-font-weight, 400);
+}
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row > :first-child {
+  gap: var(--sys-control-gap-compact, 0.25rem);
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
+  font-weight: var(--sys-text-scale-label-font-weight, 500);
+}
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row > :first-child > * { margin: 0; font-size: inherit; line-height: inherit; }
+/* Money in a row reads as text beside the status, as the time does, not as a tag. */
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row > :is([data-oods-component='PriceBadge'], [data-oods-component='BillingSummaryBadge']) {
+  padding: 0;
+  background: transparent;
+  color: var(--sys-text-primary, CanvasText);
+  font-size: var(--sys-text-scale-body-sm-font-size, 14px);
+  line-height: var(--sys-text-scale-body-sm-line-height, 20px);
+  font-variant-numeric: tabular-nums;
+}
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row > :first-child :is([data-size='sm'], [data-oods-component='Text'] + [data-oods-component='Text']) { color: var(--sys-text-muted, GrayText); font-weight: var(--sys-text-scale-body-sm-font-weight, 400); }
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row :is(time, [data-oods-component='RelativeTimestamp']) { color: var(--sys-text-muted, GrayText); font-size: var(--sys-text-scale-body-sm-font-size, 14px); }
+/* The time reads last, after the status and meta. On a phone the title takes the first line and the status, meta and time
+ * wrap together under it, instead of one line each. */
+[data-oods-collection='rows'] > .oods-collection .oods-collection-row > :is(time, [data-oods-component='RelativeTimestamp']) { order: 1; }
+@media (max-width: 600px) {
+  [data-oods-collection='rows'] > .oods-collection .oods-collection-row { flex-direction: row; align-items: center; column-gap: var(--sys-control-gap, 0.5rem); row-gap: var(--sys-control-gap-compact, 0.25rem); }
+  [data-oods-collection='rows'] > .oods-collection .oods-collection-row > :first-child { flex: none; inline-size: 100%; }
+}
+/* An archived row inside the list keeps its dimming and badge; the list's container and dividers are its border. */
+[data-oods-collection='rows'] > .oods-collection [data-oods-component='ArchivedRowOverlay'][data-archived='true']:has(> .oods-collection-row) { border: 0; border-radius: 0; background: transparent; }
+/* A section of a card that holds nothing (an unfilled body slot) takes no room, so the card's own spacing is all there is
+ * between its header and footer. */
+:where(.oods-card, [data-oods-component='Card']) [data-oods-component='Stack']:not(:has(:not([data-oods-component='Stack']))) { display: none !important; }
+/* A record's events read as one timeline: each event sits on a rail at the left instead of in a card of its own. */
+[data-oods-collection='events'] > .oods-collection { gap: 0; }
+[data-oods-collection='events'] > .oods-collection > li > :is(.oods-card, [data-oods-component='Card']) {
+  gap: var(--sys-control-gap-compact, 0.25rem);
+  padding: 0 0 var(--sys-stack-md, 1rem) var(--sys-inset-md, 1rem);
+  border: 0;
+  border-inline-start: var(--ref-border-width-bold, 2px) solid var(--sys-border-strong, CanvasText);
+  border-radius: 0;
+  background: transparent;
+}
+[data-oods-collection='events'] > .oods-collection > li:last-child > :is(.oods-card, [data-oods-component='Card']) { padding-block-end: 0; }
+[data-oods-collection='events'] > .oods-collection time { color: var(--sys-text-muted, GrayText); font-size: var(--sys-text-scale-body-sm-font-size, 14px); }
+/* An event's title reads at the list title's weight in every renderer (React and Vue write a plain strong; HTML's Text
+ * inherits its weight). */
+[data-oods-collection='events'] > .oods-collection > li > :is(.oods-card, [data-oods-component='Card']) > strong { font-weight: var(--sys-text-scale-label-font-weight, 500); }
+/* ─── end s222-m03 ──────────────────────────────────────────────────────────────────────────────────────────────── */