@oods/component-styles 0.3.0

package/dist/components.css

@@ -0,0 +1,1489 @@
+@import "@oods/tokens/css";
+@import "./statusables.css";
+
+/* Legacy unprefixed geometry used by billing recipes. Values come from the
+ * semantic layer; preserve these names until their authored callers migrate. */
+:root {
+  --space-1: var(--sys-control-gap-compact);
+  --space-2: var(--sys-control-gap);
+  --space-3: var(--sys-field-padding-inline);
+  --space-4: var(--sys-inset-md);
+  --radius-sm: var(--sys-radius-control);
+  --radius-md: var(--sys-radius-control);
+}
+
+: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-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);
+}
+
+/* Every governed Badge uses the same geometry, including React's legacy statusable class. */
+.oods-badge {
+  min-block-size: var(--cmp-badge-height, 1.5rem);
+  box-sizing: border-box;
+  font-size: var(--cmp-badge-font-size, 0.875rem);
+  line-height: var(--sys-text-line-height-tight, 1.2);
+  letter-spacing: normal;
+  text-transform: none;
+  gap: var(--cmp-badge-gap, 0.25rem);
+}
+.oods-badge__label { line-height: inherit; }
+
+/* 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));
+}
+
+: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));
+}
+
+: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);
+  border: 1px solid var(--cmp-banner-border, var(--cmp-border-default, currentColor));
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-banner-background, var(--cmp-surface-subtle, transparent));
+  color: var(--cmp-banner-text, var(--cmp-text-body, currentColor));
+}
+
+.oods-banner__title,
+.oods-banner-title {
+  font-weight: var(--ref-typography-weights-bold, 700);
+}
+
+: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);
+  display: inline-flex;
+  min-block-size: var(--oods-button-min-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);
+  border: 1px solid var(--oods-button-border, var(--cmp-button-border, transparent));
+  border-radius: var(--cmp-button-radius, 0.5rem);
+  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);
+  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'])[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-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-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='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='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-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);
+  font-size: var(--oods-button-font-size);
+}
+
+: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);
+  font-size: var(--oods-button-font-size);
+}
+
+: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);
+  font-size: var(--oods-button-font-size);
+}
+
+: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)));
+}
+
+:where(.oods-button, [data-oods-component='Button']):disabled {
+  border-color: var(--cmp-button-border-disabled, var(--sys-border-subtle, GrayText));
+  background: var(--cmp-button-background-disabled, var(--sys-surface-disabled, Canvas));
+  color: var(--cmp-button-text-disabled, var(--sys-text-disabled, GrayText));
+  cursor: not-allowed;
+}
+
+/* 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,
+  .oods-banner-dismiss, .tabs__overflow-trigger, .oods-tabs-overflow-trigger,
+  [data-oods-component] input, [data-oods-component] textarea, [data-oods-component] select,
+  [data-oods-component] button, [data-oods-component] a[href], [data-oods-component] [role='menuitem'],
+  [data-oods-component='Checkbox']):focus-visible {
+  outline: var(--cmp-focus-width, 2px) solid var(--cmp-focus-outer, Highlight);
+  outline-offset: var(--cmp-focus-offset, 2px);
+}
+
+:where(.oods-card, [data-oods-component='Card']) {
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  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-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));
+}
+
+/* The tokens build scopes colour per brand and theme; the dark elevation tokens are
+ * emitted at :root, so the dark scope takes its shadow roles from them here. */
+[data-theme='dark'] {
+  --cmp-card-shadow-offset-x: var(--theme-dark-shadow-elevation-card-offset-x);
+  --cmp-card-shadow-offset-y: var(--theme-dark-shadow-elevation-card-offset-y);
+  --cmp-card-shadow-blur: var(--theme-dark-shadow-elevation-card-blur);
+  --cmp-card-shadow-spread: var(--theme-dark-shadow-elevation-card-spread);
+  --cmp-card-shadow-color: var(--theme-dark-shadow-elevation-card-color);
+  --cmp-shadow-overlay-offset-x: var(--theme-dark-shadow-elevation-overlay-offset-x);
+  --cmp-shadow-overlay-offset-y: var(--theme-dark-shadow-elevation-overlay-offset-y);
+  --cmp-shadow-overlay-blur: var(--theme-dark-shadow-elevation-overlay-blur);
+  --cmp-shadow-overlay-spread: var(--theme-dark-shadow-elevation-overlay-spread);
+  --cmp-shadow-overlay-color: var(--theme-dark-shadow-elevation-overlay-color);
+}
+
+: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);
+}
+
+: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);
+}
+
+:where([data-oods-component='CardHeader']) > :is(h1, h2, h3, h4, h5, h6) {
+  font-size: var(--sys-text-size-lg, 1.25rem);
+}
+
+:where([data-oods-component='DetailHeader']) > [data-oods-subtitle],
+:where([data-oods-component='CardHeader']) > [data-oods-supporting] {
+  color: var(--cmp-header-subtitle, CanvasText);
+}
+
+:where([data-oods-component='DetailHeader']) > [data-oods-metadata] {
+  color: var(--cmp-header-metadata, CanvasText);
+  font-size: var(--sys-text-size-sm, 0.875rem);
+}
+
+:where([data-oods-component='ColorSwatch']) {
+  --cmp-swatch-chip: var(--sys-surface-interactive-primary-default);
+  --cmp-swatch-border: var(--sys-border-strong);
+  --cmp-text-body: var(--sys-text-primary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cmp-spacing-inline-sm, 0.75rem);
+  color: var(--cmp-text-body, CanvasText);
+}
+
+:where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip] {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  border: 1px solid var(--cmp-swatch-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--oods-swatch-color, var(--cmp-swatch-chip, CanvasText));
+}
+
+:where([data-oods-component='ColorizedBadge']) {
+  --cmp-badge-background: var(--sys-status-neutral-surface);
+  --cmp-badge-border: var(--sys-status-neutral-border);
+  --cmp-badge-text: var(--sys-status-neutral-text);
+  --cmp-badge-icon: var(--sys-status-neutral-icon);
+  --cmp-badge-color: var(--sys-surface-interactive-primary-default);
+  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, CanvasText);
+  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);
+}
+
+: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);
+}
+
+:where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker] {
+  display: inline-block;
+  flex: none;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  border: 1px solid var(--cmp-badge-icon, CanvasText);
+  border-radius: 50%;
+  background: var(--oods-badge-color, var(--cmp-badge-color, CanvasText));
+}
+
+/* The decorative color marker always has an adjacent, visible text label. */
+:where([data-oods-component='ColorSwatch']) > [data-oods-swatch-label],
+:where([data-oods-component='ColorizedBadge']) [data-oods-badge-label] {
+  display: inline;
+  visibility: visible;
+  color: inherit;
+}
+
+/* This is a frame for authored content; it renders no chart pixels. */
+:where([data-oods-component='VizAreaPreview'], [data-oods-component='VizGraphPreview'], [data-oods-component='VizHeatmapPreview'], [data-oods-component='VizLinePreview'], [data-oods-component='VizMarkPreview'], [data-oods-component='VizPointPreview'], [data-oods-component='VizScatterPreview']) {
+  --cmp-preview-frame: var(--sys-border-subtle);
+  --cmp-preview-placeholder: var(--sys-text-muted);
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: min(100%, var(--oods-viz-width, 640px));
+  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);
+  background: var(--sys-surface-canvas, Canvas);
+}
+
+:where([data-oods-component='VizAreaPreview'], [data-oods-component='VizGraphPreview'], [data-oods-component='VizHeatmapPreview'], [data-oods-component='VizLinePreview'], [data-oods-component='VizMarkPreview'], [data-oods-component='VizPointPreview'], [data-oods-component='VizScatterPreview']) > [data-viz-preview-placeholder] {
+  color: var(--cmp-preview-placeholder, CanvasText);
+  text-align: center;
+}
+
+:where([data-oods-component='VizAreaPreview'][data-viz-rendered='true'], [data-oods-component='VizGraphPreview'][data-viz-rendered='true'], [data-oods-component='VizHeatmapPreview'][data-viz-rendered='true'], [data-oods-component='VizLinePreview'][data-viz-rendered='true'], [data-oods-component='VizMarkPreview'][data-viz-rendered='true'], [data-oods-component='VizPointPreview'][data-viz-rendered='true'], [data-oods-component='VizScatterPreview'][data-viz-rendered='true']) {
+  margin: 0;
+  padding: 0;
+  min-block-size: 0;
+  inline-size: 100%;
+  border: 0;
+  place-items: stretch;
+}
+: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);
+}
+: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; }
+/* A placed chart carries a narrow render beside the design-size one; the figure measures its own inline size and shows the narrow render at 600px or less, so axis text keeps its size on a phone column instead of scaling with the SVG (Sprint 202 m01). */
+:where([data-viz-rendered='true'][data-viz-narrow='true']) { container-type: inline-size; }
+:where([data-viz-svg-narrow]) { display: none; min-inline-size: 0; }
+:where([data-viz-svg-narrow]) > svg { display: block; inline-size: 100%; block-size: auto; }
+@container (max-width: 600px) {
+  :where([data-viz-narrow='true']) > [data-viz-svg] { display: none; }
+  :where([data-viz-narrow='true']) > [data-viz-svg-narrow] { display: block; }
+}
+/* s213-m01 (Sprint 212 review finding 5): a figure with a wide render fills its column. The design render grows until
+ * the figure is 900px wide, then the render drawn for a desktop column takes over, so the chart spans the screen near
+ * design scale; it used to stop at its design width, half of a 1440 detail screen. */
+:where([data-viz-rendered='true'][data-viz-wide='true']) { container-type: inline-size; }
+:where([data-viz-svg-wide]) { display: none; min-inline-size: 0; }
+:where([data-viz-svg-wide]) > svg { display: block; inline-size: 100%; block-size: auto; }
+/* Each render is drawn at most 1.25 times its own size, so a 10px axis label never passes 12.5px (#2347): the design
+ * render reaches about 1.23 times before the wide one takes over, and the wide render, 1130px wide, stops growing here. */
+:where([data-viz-svg-wide]) > svg { max-inline-size: calc(1130px * 1.25); }
+:where([data-viz-wide='true']) > [data-viz-svg] > svg { max-inline-size: none; }
+@container (min-width: 900px) {
+  :where([data-viz-wide='true']) > [data-viz-svg] { display: none; }
+  :where([data-viz-wide='true']) > [data-viz-svg-wide] { display: block; }
+}
+:where([data-viz-description]) { color: var(--sys-text-neutral); font-size: var(--sys-text-size-sm, 0.875rem); }
+
+/* Timeline-family logs and the audit event article mirror renderTimelineContainer and renderEventArticle. */
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) {
+  --cmp-timeline-background: var(--sys-surface-raised);
+  --cmp-timeline-border: var(--sys-border-subtle);
+  --cmp-timeline-text: var(--sys-text-primary);
+  --cmp-timeline-marker: var(--sys-border-strong);
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-timeline-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  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);
+}
+
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) > [data-timeline-events] {
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  margin: 0;
+  padding-inline-start: var(--cmp-spacing-stack-lg, 1.5rem);
+}
+
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) > [data-timeline-events] > li {
+  border-inline-start: var(--ref-border-width-bold, 2px) solid var(--cmp-timeline-marker, CanvasText);
+  padding-inline-start: var(--cmp-spacing-inline-sm, 0.75rem);
+}
+
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) [data-timeline-label],
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) [data-timeline-detail] {
+  margin: 0;
+}
+
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) [data-timeline-time],
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) [data-timeline-detail],
+:where([data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline']) [data-timeline-empty] {
+  color: var(--sys-text-muted, GrayText);
+  font-size: var(--sys-text-size-sm, 0.875rem);
+}
+
+:where([data-oods-component='AuditEvent']) {
+  --cmp-event-background: var(--sys-surface-raised);
+  --cmp-event-border: var(--sys-border-subtle);
+  --cmp-event-text: var(--sys-text-primary);
+  display: grid;
+  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);
+  background: var(--cmp-event-background, Canvas);
+  color: var(--cmp-event-text, CanvasText);
+}
+
+:where([data-oods-component='AuditEvent']) > [data-event-label],
+:where([data-oods-component='AuditEvent']) > [data-event-detail] {
+  margin: 0;
+}
+
+:where([data-oods-component='AuditEvent']) > [data-event-label] {
+  font-weight: var(--ref-typography-weights-semibold, 600);
+}
+
+:where([data-oods-component='AuditEvent']) > [data-event-time],
+:where([data-oods-component='AuditEvent']) > [data-event-detail] {
+  color: var(--sys-text-muted, GrayText);
+  font-size: var(--sys-text-size-sm, 0.875rem);
+}
+
+/* Badge-family summaries reuse the governed Badge substrate; the pill groups mirror their plain-span HTML renderers. */
+: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']) {
+  --cmp-badge-background: var(--sys-status-neutral-surface);
+  --cmp-badge-border: var(--sys-status-neutral-border);
+  --cmp-badge-text: var(--sys-status-neutral-text);
+  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, CanvasText);
+  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);
+}
+
+: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);
+}
+
+: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] {
+  display: inline;
+  visibility: visible;
+  color: inherit;
+}
+
+:where([data-oods-component='RoleBadgeList'], [data-oods-component='TagPills']) {
+  --cmp-badge-background: var(--sys-status-neutral-surface);
+  --cmp-badge-border: var(--sys-status-neutral-border);
+  --cmp-badge-text: var(--sys-status-neutral-text);
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--cmp-spacing-inline-xs, 0.5rem);
+  color: var(--cmp-badge-text, CanvasText);
+}
+
+:where([data-oods-component='RoleBadgeList']) [data-role-badge],
+:where([data-oods-component='TagPills']) [data-tag-pill],
+:where([data-oods-component='TagPills']) [data-tag-overflow] {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
+  border: 1px solid var(--cmp-badge-border, CanvasText);
+  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);
+}
+
+/* Panel, filter and summary sections mirror their HTML renderers; controls stay unwired. */
+:where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel']) {
+  --cmp-panel-background: var(--sys-surface-raised);
+  --cmp-panel-border: var(--sys-border-subtle);
+  --cmp-panel-title: var(--sys-text-primary);
+  --cmp-panel-subtitle: var(--sys-text-secondary);
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-panel-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-panel-background, Canvas);
+  color: var(--cmp-panel-title, CanvasText);
+}
+
+:where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel']) > [data-panel-header] {
+  display: grid;
+  gap: var(--sys-spacing-stack-compact, 0.75rem);
+}
+
+: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);
+}
+
+:where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel']) > [data-panel-header] > [data-panel-subtitle] {
+  color: var(--cmp-panel-subtitle, CanvasText);
+  font-size: var(--sys-text-size-sm, 0.875rem);
+}
+
+:where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel']) > [data-panel-content] > [data-panel-summary] {
+  color: var(--cmp-panel-subtitle, CanvasText);
+}
+
+:where([data-oods-component='FilterPanel']) {
+  --cmp-filter-background: var(--sys-surface-raised);
+  --cmp-filter-border: var(--sys-border-subtle);
+  --cmp-filter-text: var(--sys-text-primary);
+  --cmp-filter-legend: var(--sys-text-secondary);
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-filter-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-filter-background, Canvas);
+  color: var(--cmp-filter-text, CanvasText);
+}
+
+:where([data-oods-component='FilterPanel']) > [data-filter-section] {
+  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);
+}
+
+:where([data-oods-component='FilterPanel']) > [data-filter-section] > legend {
+  padding-inline: var(--sys-control-gap-compact, 0.25rem);
+  color: var(--cmp-filter-legend, CanvasText);
+  font-weight: var(--ref-typography-weights-semibold, 600);
+}
+
+:where([data-oods-component='FilterPanel']) > [data-active-filters] {
+  display: flex;
+  align-items: center;
+  gap: var(--cmp-spacing-inline-sm, 0.75rem);
+}
+
+: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;
+  color: var(--cmp-filter-text, CanvasText);
+  font: 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']) {
+  --cmp-form-background: var(--sys-surface-raised);
+  --cmp-form-border: var(--sys-border-subtle);
+  --cmp-form-text: var(--sys-text-primary);
+  --cmp-form-hint: var(--sys-text-secondary);
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  margin: 0;
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-form-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-form-background, Canvas);
+  color: var(--cmp-form-text, CanvasText);
+}
+
+: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] {
+  display: grid;
+  gap: var(--sys-spacing-stack-compact, 0.75rem);
+}
+
+: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);
+}
+
+: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] {
+  color: var(--cmp-form-hint, CanvasText);
+  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']) [data-tag-list] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cmp-spacing-inline-xs, 0.5rem);
+}
+
+: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] {
+  padding: var(--cmp-badge-padding-block, 0.125rem) var(--cmp-badge-padding-inline, 0.5rem);
+  border: 1px solid var(--cmp-form-border, CanvasText);
+  border-radius: var(--cmp-badge-radius, 999px);
+}
+
+: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'] {
+  display: grid;
+  gap: var(--sys-control-gap-compact, 0.25rem);
+}
+
+: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'] > span {
+  color: var(--cmp-form-hint, CanvasText);
+  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;
+  font: 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']) > 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);
+}
+
+: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] {
+  color: var(--cmp-form-hint, CanvasText);
+  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']) [data-form-content] {
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+}
+
+: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] {
+  display: grid;
+  gap: var(--sys-control-gap-compact, 0.25rem);
+}
+
+: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] > span {
+  color: var(--cmp-form-hint, CanvasText);
+  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']) 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;
+  font: inherit;
+}
+
+:where([data-oods-component='StatusSelector']) {
+  --cmp-input-background: var(--sys-surface-raised);
+  --cmp-input-border: var(--sys-border-subtle);
+  --cmp-input-text: var(--sys-text-primary);
+  --cmp-input-focus: var(--sys-border-strong);
+  display: grid;
+  gap: var(--sys-control-gap-compact, 0.25rem);
+  color: var(--cmp-input-text, CanvasText);
+}
+
+:where([data-oods-component='StatusSelector']) [data-form-control='select'] {
+  display: grid;
+  gap: var(--sys-control-gap-compact, 0.25rem);
+}
+
+:where([data-oods-component='StatusSelector']) select {
+  padding: var(--cmp-input-padding-block-compact, 0.375rem) var(--cmp-input-padding-inline-compact, 0.5rem);
+  border: 1px solid var(--cmp-input-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-input-background, Canvas);
+  color: var(--cmp-input-text, CanvasText);
+  font: inherit;
+}
+
+/* The focus ring is the shared rule above; the focused field also takes the input focus colour on its border. */
+:where([data-oods-component='StatusSelector']) select:focus-visible {
+  border-color: var(--cmp-input-focus, Highlight);
+}
+
+
+:where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) {
+  --cmp-summary-background: var(--sys-surface-raised);
+  --cmp-summary-border: var(--sys-border-subtle);
+  --cmp-summary-text: var(--sys-text-primary);
+  --cmp-summary-label: var(--sys-text-secondary);
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-summary-border, CanvasText);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  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);
+}
+
+:where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) > dl {
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) minmax(0, 2fr);
+  gap: var(--cmp-spacing-stack-xs, 0.5rem) var(--cmp-spacing-inline-md, 1rem);
+  margin: 0;
+}
+
+:where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) [data-summary-item] {
+  display: contents;
+}
+
+:where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) dt {
+  color: var(--cmp-summary-label, CanvasText);
+  font-weight: var(--ref-typography-weights-semibold, 600);
+}
+
+:where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) dd {
+  margin: 0;
+}
+
+:where([data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary']) > [data-summary-fallback] {
+  margin: 0;
+  color: var(--cmp-summary-label, CanvasText);
+}
+
+.oods-field {
+  display: grid;
+  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-control,
+:where(
+  input[data-oods-component='Input'],
+  input[data-oods-component='DatePicker'],
+  select[data-oods-component='Select'],
+  textarea[data-oods-component='Textarea']
+) {
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--cmp-input-padding-block, 0.625rem) 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);
+  background: var(--cmp-input-background, Canvas);
+  color: var(--cmp-input-text, CanvasText);
+  font: inherit;
+}
+
+.oods-field-control::placeholder { color: var(--cmp-input-placeholder, GrayText); }
+.oods-field-control[aria-invalid='true'] { border-color: var(--cmp-input-message-border, 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-banner-dismiss {
+  display: inline-flex;
+  inline-size: var(--cmp-button-height, 2.5rem);
+  block-size: var(--cmp-button-height, 2.5rem);
+  align-items: center;
+  justify-content: center;
+  align-self: start;
+  padding: 0;
+  border: 1px solid currentColor;
+  border-radius: var(--cmp-button-radius, 0.5rem);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.oods-checkbox, [data-oods-component='Checkbox']) {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: var(--cmp-checkbox-gap, 0.5rem);
+  color: var(--cmp-checkbox-text, var(--cmp-text-body, CanvasText));
+}
+
+:where(.oods-checkbox input, [data-oods-component='Checkbox']) {
+  accent-color: var(--cmp-checkbox-background-checked, Highlight);
+}
+
+:where(.oods-grid, [data-oods-component='Grid']) {
+  display: grid;
+  grid-template-columns: repeat(var(--oods-grid-columns, auto-fit), minmax(min(100%, var(--oods-grid-min-column, 16rem)), 1fr));
+  gap: var(--oods-layout-gap, var(--cmp-spacing-stack-default, 1rem));
+  align-items: var(--oods-layout-align, stretch);
+  justify-content: var(--oods-layout-justify, normal);
+}
+
+/*
+ * s206-m01: a numeric column count is a MAXIMUM. The grid keeps that many columns while each still fits its minimum
+ * width and wraps to fewer below that, so it never overflows its container (four fixed 16rem columns made thirteen
+ * dashboards 1,024px wide at 390 and 820). auto-fill keeps a lone item one column wide on a wide screen.
+ */
+:where(.oods-grid[data-max-columns], [data-oods-component='Grid'][data-max-columns]) {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--oods-grid-min-column, 16rem), (100% - (var(--oods-grid-columns) - 1) * var(--oods-layout-gap, var(--cmp-spacing-stack-default, 1rem))) / var(--oods-grid-columns))), 1fr));
+}
+
+:where(.oods-stack, [data-oods-component='Stack']) {
+  display: flex;
+  flex-direction: var(--oods-stack-direction, column);
+  flex-wrap: var(--oods-stack-wrap, nowrap);
+  gap: var(--oods-layout-gap, var(--cmp-spacing-stack-default, 1rem));
+  align-items: var(--oods-layout-align, stretch);
+  justify-content: var(--oods-layout-justify, flex-start);
+}
+
+:where(.oods-table, [data-oods-component='Table']) {
+  inline-size: 100%;
+  border-collapse: collapse;
+  background: var(--cmp-surface-panel, Canvas);
+  color: var(--cmp-text-body, CanvasText);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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));
+  border-block-end: 1px solid var(--cmp-border-default, currentColor);
+  text-align: start;
+}
+
+:where(.oods-tabs, [data-oods-component='Tabs']) {
+  --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);
+  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-padding-block: var(--cmp-tabs-padding-block-lg, 0.75rem);
+  --oods-tabs-padding-inline: var(--cmp-tabs-padding-inline-lg, 1rem);
+}
+
+:where(.oods-tabs, [data-oods-component='Tabs']) [role='menu'] {
+  display: grid;
+  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);
+  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));
+}
+
+.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-panel { padding-block: var(--cmp-spacing-stack-default, 1rem); }
+
+:where(.oods-text, [data-oods-component='Text']) {
+  color: var(--cmp-text-body, CanvasText);
+  font: inherit;
+}
+
+: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);
+}
+
+: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);
+}
+
+:where(.oods-text, [data-oods-component='Text'])[data-size='lg'] {
+  font-size: var(--sys-text-size-lg, 1.25rem);
+  line-height: var(--sys-text-line-height-standard, 1.4);
+}
+
+:where(.oods-text, [data-oods-component='Text'])[data-weight='regular'],
+:where(.oods-text, [data-oods-component='Text'])[data-weight='normal'] {
+  font-weight: var(--ref-typography-weights-regular, 400);
+}
+
+:where(.oods-text, [data-oods-component='Text'])[data-weight='medium'] {
+  font-weight: var(--ref-typography-weights-medium, 500);
+}
+
+:where(.oods-text, [data-oods-component='Text'])[data-weight='semibold'] {
+  font-weight: var(--ref-typography-weights-semibold, 600);
+}
+
+@media (max-width: 40rem) {
+  /* Generated single-screen layouts also need the workflow's phone reflow. */
+  [data-layout='sidebar'] { grid-template-columns: minmax(0, 1fr) !important; }
+  :where(.oods-banner, [data-oods-component='Banner']) { grid-template-columns: 1fr; }
+  :where(.oods-table, [data-oods-component='Table']):not([data-density]) { font-size: var(--sys-text-size-sm, 0.875rem); }
+}
+
+@media (forced-colors: active) {
+  :where(.oods-badge, .oods-banner, .oods-button, .oods-card, .oods-field-control, .oods-tab, .oods-table) {
+    forced-color-adjust: none;
+  }
+
+  :is([data-oods-component='ColorSwatch'], [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-oods-component='TagPills']) {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip],
+  :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker] {
+    border-color: CanvasText;
+    background: CanvasText;
+  }
+}
+
+[data-theme='hc'] :where([data-oods-component='ColorSwatch'], [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-oods-component='TagPills']) {
+  border-color: CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+
+[data-theme='hc'] :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip],
+[data-theme='hc'] :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker] {
+  border-color: CanvasText;
+  background: CanvasText;
+}
+
+/*
+ * High-contrast brand tokens intentionally flatten status surfaces to Canvas.
+ * Keep their foreground on the matching CanvasText system colour rather than
+ * 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']
+) {
+  border-color: Highlight;
+  background: Canvas;
+  color: CanvasText;
+}
+
+[data-theme='hc'] .oods-field-error {
+  color: CanvasText;
+}
+
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):not(:disabled) {
+  border-color: Highlight;
+  background: Highlight;
+  color: HighlightText;
+}
+
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):disabled {
+  border-color: GrayText;
+  background: Canvas;
+  color: GrayText;
+}
+
+@media (forced-colors: active) {
+  :is([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='TagManager'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], [data-oods-component='AuditEvent'], [data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='StatusSelector'], [data-oods-component='TagInput'], [data-oods-component='TemplatePicker']) {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
+[data-theme='hc'] :where([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='TagManager'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], [data-oods-component='AuditEvent'], [data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='StatusSelector'], [data-oods-component='TagInput'], [data-oods-component='TemplatePicker']) {
+  border-color: CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+
+/* Former ported families share the canonical root stylesheet. */
+:where(
+  [data-oods-component='StatusBadge'],
+  [data-oods-component='PriceBadge']
+) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cmp-badge-gap, 0.25rem);
+  min-block-size: var(--cmp-badge-height, 1.5rem);
+  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-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);
+}
+
+:where([data-oods-component='StatusBadge'])[data-status='active'],
+:where([data-oods-component='StatusBadge'])[data-status='success'] {
+  --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'] {
+  --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'] {
+  --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);
+}
+
+:where(
+  [data-oods-component='StatusTimeline'],
+  [data-oods-component='AuditTimeline']
+) {
+  display: grid;
+  gap: var(--cmp-spacing-stack-md, 1rem);
+  color: var(--cmp-text-body, CanvasText);
+}
+
+:where(
+  [data-oods-component='StatusTimeline'],
+  [data-oods-component='AuditTimeline']
+) :where(ol, ul) {
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  margin: 0;
+  padding-inline-start: var(--cmp-spacing-stack-lg, 1.5rem);
+}
+
+:where(
+  [data-oods-component='StatusTimeline'],
+  [data-oods-component='AuditTimeline']
+) :where(article, li) {
+  border-inline-start: var(--ref-border-width-bold, 2px) solid var(--cmp-border-subtle, currentColor);
+  padding-inline-start: var(--cmp-spacing-inline-sm, 0.75rem);
+}
+
+:where([data-oods-component='CancellationSummary']) {
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-border-default, currentColor);
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-surface-panel, Canvas);
+  color: var(--cmp-text-body, CanvasText);
+}
+
+:where([data-oods-component='CancellationSummary']) :where(dl, [data-summary-fields]) {
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) minmax(0, 2fr);
+  gap: var(--cmp-spacing-stack-xs, 0.5rem) var(--cmp-spacing-inline-md, 1rem);
+  margin: 0;
+}
+
+:where([data-oods-component='CancellationSummary']) :where(dt, [data-summary-term]) {
+  font-weight: var(--ref-typography-weights-semibold, 600);
+}
+
+:where([data-oods-component='CancellationSummary']) :where(dd, [data-summary-value]) {
+  margin: 0;
+}
+
+:where([data-oods-component='SearchInput']) {
+  display: flex;
+  align-items: center;
+  gap: var(--cmp-spacing-inline-xs, 0.5rem);
+}
+
+: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);
+  border: 1px solid var(--cmp-input-border, var(--cmp-border-default, currentColor));
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-input-background, Canvas);
+  color: var(--cmp-input-text, CanvasText);
+  font: inherit;
+}
+
+: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);
+  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);
+  font: inherit;
+}
+
+:where([data-oods-component='PaginationBar']) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cmp-spacing-inline-sm, 0.75rem);
+  color: var(--cmp-text-body, CanvasText);
+}
+
+:where([data-oods-component='PaginationBar']) button:disabled {
+  color: var(--cmp-button-text-disabled, GrayText);
+  cursor: not-allowed;
+}
+
+/* Narrow widths: the record count and range share the first line; the page controls stay together on the second. */
+@media (max-width: 600px) {
+  :where([data-oods-component='PaginationBar']) {
+    display: grid;
+    grid-template-columns: auto auto auto minmax(0, 1fr);
+    grid-template-areas: 'count count range range' 'prev pages next current';
+    align-items: center;
+    justify-items: start;
+    row-gap: var(--cmp-spacing-stack-xs, 0.5rem);
+  }
+  :where([data-oods-component='PaginationBar']) [data-pagination-count] { grid-area: count; }
+  :where([data-oods-component='PaginationBar']) [data-pagination-range] { grid-area: range; justify-self: end; }
+  :where([data-oods-component='PaginationBar']) [data-pagination-prev] { grid-area: prev; }
+  :where([data-oods-component='PaginationBar']) .oods-pagination-bar__pages { grid-area: pages; }
+  :where([data-oods-component='PaginationBar']) [data-pagination-next] { grid-area: next; }
+  :where([data-oods-component='PaginationBar']) [data-pagination-current] { grid-area: current; }
+  :where([data-oods-component='PaginationBar']) label { grid-column: 1 / -1; }
+}
+
+:where([data-oods-component='RelativeTimestamp']) {
+  color: var(--cmp-text-muted, GrayText);
+  font-size: var(--sys-text-size-sm, 0.875rem);
+}
+
+
+@media (forced-colors: active) {
+  :where(
+    [data-oods-component='StatusBadge'],
+    [data-oods-component='PriceBadge'],
+    [data-oods-component='CancellationSummary'],
+    [data-oods-component='SearchInput'] input,
+    [data-oods-component='PaginationBar'] button
+  ) {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
+/* Fresh composition naming families share the same semantic token cascade. */
+:where([data-oods-component='LabelCell'], [data-oods-component='InlineLabel'], [data-oods-component='FormLabelGroup']) {
+  --cmp-text-primary: var(--sys-text-primary);
+  color: var(--cmp-text-primary, CanvasText);
+  font: inherit;
+}
+:where([data-oods-component='LabelCell'], [data-oods-component='FormLabelGroup']) {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sys-spacing-stack-compact, 0.75rem);
+}
+:where([data-oods-component='LabelCell']) [data-oods-label-cell-description],
+:where([data-oods-component='FormLabelGroup']) [data-oods-form-hint] {
+  color: var(--cmp-text-secondary, GrayText);
+  font-size: var(--sys-text-size-sm, 0.875rem);
+}
+:where([data-oods-form-label]) { font-weight: var(--ref-typography-weights-medium, 500); }
+
+:where([data-oods-component='LabelCell'], [data-oods-component='FormLabelGroup']) {
+  --cmp-text-secondary: var(--sys-text-secondary);
+}
+
+:where([data-oods-component='PriceCardMeta'], [data-oods-component='OwnershipMeta']) {
+  --cmp-meta-text: var(--sys-text-primary);
+  --cmp-meta-label: var(--sys-text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cmp-spacing-inline-sm, 0.75rem);
+  color: var(--cmp-meta-text, CanvasText);
+}
+:where([data-oods-component='PriceCardMeta'], [data-oods-component='OwnershipMeta']) [data-meta-title],
+:where([data-oods-component='PriceCardMeta'], [data-oods-component='OwnershipMeta']) strong {
+  color: var(--cmp-meta-label, CanvasText);
+  font-weight: var(--ref-typography-weights-semibold, 600);
+}
+/* Billable list/form surfaces share the trait's semantic token roles. */
+[data-oods-component='BillingSummaryBadge'] {
+  display: inline-block;
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: var(--cmp-billing-amount-text, var(--sys-text-strong));
+  font-variant-numeric: tabular-nums;
+}
+:where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+  color: var(--cmp-billing-amount-text, var(--sys-text-strong));
+}
+:where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > span {
+  color: var(--cmp-billing-currency-text, var(--sys-text-subtle));
+}
+:where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > input,
+:where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > select {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--space-2) var(--space-3);
+  font: inherit;
+  color: inherit;
+  background: var(--sys-surface-default);
+  border: 1px solid var(--sys-border-default);
+  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);
+}
+:where([data-oods-component='BillingAmountInput'], [data-oods-component='BillingIntervalSelector']) > [role='alert'] {
+  color: var(--sys-status-critical-text);
+  margin: 0;
+}
+
+/* Billable cycle/payment and Archivable row surfaces. */
+[data-oods-component='CycleProgressCard'],
+:where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) {
+  min-width: 0;
+  padding: var(--space-4, 1rem);
+  border: 1px solid var(--sys-border-default, GrayText);
+  border-radius: var(--radius-md, 0.5rem);
+  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); }
+[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. */
+[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);
+  overflow: hidden;
+  background: var(--sys-border-default, 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);
+}
+[data-oods-component='CycleProgressCard'] progress::-webkit-progress-value {
+  background: var(--cmp-billing-cycle-progress-fill, var(--sys-text-accent, Highlight));
+}
+[data-oods-component='CycleProgressCard'] progress::-moz-progress-bar {
+  background: var(--cmp-billing-cycle-progress-fill, var(--sys-text-accent, Highlight));
+}
+@media (forced-colors: active) {
+  [data-oods-component='CycleProgressCard'] progress { background: Canvas; color: Highlight; border: 1px solid CanvasText; forced-color-adjust: none; }
+  [data-oods-component='CycleProgressCard'] progress::-webkit-progress-bar { background: Canvas; }
+  [data-oods-component='CycleProgressCard'] progress::-webkit-progress-value { background: Highlight; }
+  [data-oods-component='CycleProgressCard'] progress::-moz-progress-bar { background: Highlight; }
+}
+.oods-billing-muted { color: var(--sys-text-subtle, GrayText); }
+:where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) ol { margin: var(--space-4, 1rem) 0 0; padding-left: var(--space-4, 1rem); }
+:where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) li { padding: var(--space-2, 0.5rem) 0; }
+:where([data-oods-component='PaymentTimeline'], [data-oods-component='PaymentEventTimeline']) li > strong { display: block; }
+[data-oods-component='BillingCardMeta'] {
+  color: var(--cmp-billing-amount-text, var(--sys-text-strong, CanvasText));
+  font-variant-numeric: tabular-nums;
+}
+[data-oods-component='ArchivedRowOverlay'] { display: contents; }
+[data-oods-component='ArchivedRowOverlay'][data-archived='true'] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  /* Retain archived dimming without dropping its label below 4.5:1. */
+  opacity: var(--status-archive-overlay-opacity, 0.7);
+}
+[data-oods-component='ArchivedRowOverlay'] > .oods-collection-row { flex: 1; min-width: 0; }
+/* The archived card owns both the interactive row and its status badge. */
+[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);
+  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; }
+.oods-archive-badge {
+  display: inline-block;
+  white-space: nowrap;
+  flex-shrink: 0;
+  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+  border-radius: var(--radius-sm, 0.5rem);
+  color: var(--status-archive-text, var(--sys-text-primary));
+  background: var(--status-archive-bg, var(--sys-surface-raised));
+}
+
+[data-oods-component='CancellationSummary'] dl {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: var(--space-4, 1rem);
+}
+[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); }
+.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); }
+
+/* Generated collection screens share one row/event presentation in both frameworks. */
+.oods-collection { list-style: none; margin: var(--cmp-spacing-stack-md, 1rem) 0; padding: 0; display: grid; gap: var(--cmp-spacing-stack-xs, 0.5rem); }
+[data-oods-collection-toolbar] { flex-wrap: wrap; min-width: 0; }
+[data-oods-collection-toolbar] > [data-oods-component='SearchInput'],
+[data-oods-collection-toolbar] > [data-oods-component='Select'],
+[data-oods-collection-toolbar] > .oods-field:has(select),
+.workflow-content [data-oods-collection-toolbar] > [data-oods-component='SearchInput'],
+.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); }
+[data-theme='hc'] .oods-collection-row:not(:disabled) { 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; }
+[data-oods-collection="events"] time { display: block; margin-top: var(--cmp-spacing-stack-xs, 0.5rem); font-size: var(--sys-text-size-sm, 0.875rem); }
+.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; }
+.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); 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 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); }
+.oods-geo-resolution, :where([data-oods-component='GeoResolutionBadge'], [data-oods-component='VizEncodingBadge'], [data-oods-component='VizRoleBadge']) { color: var(--cmp-text-body); }
+
+.oods-viz-swatches { display: flex; flex-wrap: wrap; gap: var(--cmp-spacing-inline-sm) var(--cmp-spacing-inset-default); }
+
+/* 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'] > :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%; }
+/* s213-m03: a declared major-unit amount reads through PriceBadge in a detail row; its pill hugs the amount instead of
+   stretching across the row. */
+[data-oods-component='Stack'][id$='-read-field'] > [data-oods-component='PriceBadge'] { align-self: flex-start; }
+[data-oods-component='StatusBadge'] { text-transform: none; letter-spacing: normal; width: fit-content; }
+
+/* Keep the frozen ported block intact; current recipe roles follow semantic fallbacks. */
+:where([data-oods-component='CancellationSummary']) {
+  display: grid;
+  gap: var(--cmp-spacing-stack-sm, 0.75rem);
+  padding: var(--cmp-spacing-inset-default, 1rem);
+  border: 1px solid var(--cmp-border-default, var(--sys-border-subtle));
+  border-radius: var(--cmp-input-radius, 0.5rem);
+  background: var(--cmp-surface-panel, var(--sys-surface-raised));
+  color: var(--cmp-text-body, var(--sys-text-primary));
+}
+
+/* Form labels and required marks share one line in both framework field frames. */
+.form-field__label,
+.oods-field > .oods-field-label {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sys-control-gap-compact, 0.25rem);
+}
+.oods-field.oods-checkbox,
+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); }
+.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. */
+:where([data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TemplatePicker']) { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
+:where([data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TemplatePicker']) :is([data-form-content], [data-form-control]) { min-inline-size: 0; }
+:where([data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='TemplatePicker']) :is(select, input, textarea) { min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; }
+
+/* s211-m02: one left edge. A generated page (the main landmark a standalone screen renders in) insets everything it
+ * 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); }
+[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);
+}
+
+/* s211-m02: a tab label never breaks inside a word ("Ru/n" at 390); a list with more tabs than fit scrolls instead, and
+ * the tabs never widen the flex or grid container they sit in. */
+.oods-tab { white-space: nowrap; flex: none; }
+:where(.oods-tabs, [data-oods-component='Tabs']) { min-inline-size: 0; }
+
+/* s211-m02: a status or audit timeline reads as one compact list: no browser paragraph margins, one rule beside each
+ * 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']) 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 {
+  display: grid;
+  gap: var(--sys-stack-xs, 0.5rem);
+  border-inline-start: var(--ref-border-width-bold, 2px) solid var(--sys-border-subtle, currentColor);
+  padding-inline-start: var(--cmp-spacing-inline-sm, 0.75rem);
+}
+:where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) article p { margin: 0; }
+:where([data-oods-component='StatusTimeline'], [data-oods-component='AuditTimeline']) article time { color: var(--sys-text-secondary, GrayText); font-size: var(--sys-text-size-sm, 0.875rem); }
+
+/* s211-m02: a screen's actions sit together in one bar of design-system buttons. */
+.oods-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sys-control-gap, 0.5rem); }
+
+/* s211-m02: a search field fills the room its toolbar gives it, as the selects beside it do. */
+:where([data-oods-component='SearchInput']) > :not(button) { flex: 1 1 auto; min-inline-size: 0; }
+
+/* s211-m02: the summary's heading sits on the card's own inset, not on the browser's heading margins. */
+:where([data-oods-component='CancellationSummary']) > :is(h2, h3) { margin: 0; }
+
+/* Reference values remain inspectable without making UUIDs the primary labels. */
+[data-oods-reference-inspection] { margin-block-start: var(--cmp-spacing-stack-md, 1rem); }
+[data-oods-reference-inspection] summary { cursor: pointer; font-weight: var(--ref-typography-weights-semibold, 600); }
+[data-oods-reference-inspection] dl { display: grid; gap: var(--cmp-spacing-stack-sm, 0.75rem); }
+[data-oods-reference-inspection] dt { font-weight: var(--ref-typography-weights-semibold, 600); }
+[data-oods-reference-inspection] dd { margin: 0; }
+[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) {
+  border: 3px double CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']::before {
+  content: "⚠" / "";
+}