baseline-foundry 0.1.7 → 0.2.1

package/dist/styles.css

@@ -36,8 +36,35 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) {
-  --bf-baseline: 0.5rem;
+  /* Resolved Canonical DTCG spacing; these names always retain the pinned final matrix. */
+  --spacing-baseline: 0.5rem;
+  --spacing-gap-field-block: 0.5rem;
+  --spacing-gap-mark-inline: 0.5rem;
+  --spacing-gap-group-block: 1.5rem;
+  --spacing-gap-pattern-block: 4rem;
+  --spacing-gap-region-block: 8rem;
+  --spacing-inset-field-inline: 0.5rem;
+  --spacing-inset-action-inline: 1rem;
+  --spacing-inset-continuation-inline: 2rem;
+  --spacing-inset-surface-inline: 1rem;
+  --spacing-inset-surface-block: 1rem;
+  --spacing-inset-strip-block: 4rem;
+  /* Temporary BF compatibility properties alias Canonical directly during
+     the bounded public-name deprecation window. */
+  --bf-baseline: var(--spacing-baseline);
+  --bf-field-gap: var(--spacing-gap-field-block);
+  --bf-leading-mark-gap: var(--spacing-gap-mark-inline);
+  --bf-section-space-shallow: var(--spacing-gap-group-block);
+  --bf-section-space: var(--spacing-gap-pattern-block);
+  --bf-section-space-deep: var(--spacing-gap-region-block);
+  --bf-component-inline-inset-field: var(--spacing-inset-field-inline);
+  --bf-component-inline-inset-action: var(--spacing-inset-action-inline);
+  --bf-component-inline-inset-continuation: var(--spacing-inset-continuation-inline);
+  --bf-panel-padding-inline: var(--spacing-inset-surface-inline);
+  --bf-panel-padding-block: var(--spacing-inset-surface-block);
+  --bf-strip-space: var(--spacing-inset-strip-block);
   --bf-space-0: 0rem;
+  --bf-inline-unit: 0.25rem;
   --bf-space-half: calc(var(--bf-baseline) / 2);
   --bf-space-1: var(--bf-baseline);
   --bf-space-2: calc(var(--bf-baseline) * 2);
@@ -50,10 +77,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 90rem;
   --bf-content-padding-inline: 1rem;
   --bf-measure: 40rem;
-  --bf-section-space: 4rem;
-  --bf-section-space-shallow: 1.5rem;
-  --bf-section-space-deep: 8rem;
-  --bf-strip-space: 4rem;
   --bf-grid-gap-inline: 1rem;
   --bf-grid-gap-block: 1rem;
   --bf-page-margin: 1rem;
@@ -152,8 +175,35 @@ html.u-baseline-grid::after {
  }
 
 :where(.bf-theme.bf-tier-editorial) {
-  --bf-baseline: 0.5rem;
+  /* Resolved Canonical DTCG spacing; these names always retain the pinned final matrix. */
+  --spacing-baseline: 0.5rem;
+  --spacing-gap-field-block: 0.5rem;
+  --spacing-gap-mark-inline: 0.5rem;
+  --spacing-gap-group-block: 1.5rem;
+  --spacing-gap-pattern-block: 4rem;
+  --spacing-gap-region-block: 8rem;
+  --spacing-inset-field-inline: 0.5rem;
+  --spacing-inset-action-inline: 1rem;
+  --spacing-inset-continuation-inline: 2rem;
+  --spacing-inset-surface-inline: 1rem;
+  --spacing-inset-surface-block: 1rem;
+  --spacing-inset-strip-block: 4rem;
+  /* Temporary BF compatibility properties alias Canonical directly during
+     the bounded public-name deprecation window. */
+  --bf-baseline: var(--spacing-baseline);
+  --bf-field-gap: var(--spacing-gap-field-block);
+  --bf-leading-mark-gap: var(--spacing-gap-mark-inline);
+  --bf-section-space-shallow: var(--spacing-gap-group-block);
+  --bf-section-space: var(--spacing-gap-pattern-block);
+  --bf-section-space-deep: var(--spacing-gap-region-block);
+  --bf-component-inline-inset-field: var(--spacing-inset-field-inline);
+  --bf-component-inline-inset-action: var(--spacing-inset-action-inline);
+  --bf-component-inline-inset-continuation: var(--spacing-inset-continuation-inline);
+  --bf-panel-padding-inline: var(--spacing-inset-surface-inline);
+  --bf-panel-padding-block: var(--spacing-inset-surface-block);
+  --bf-strip-space: var(--spacing-inset-strip-block);
   --bf-space-0: 0rem;
+  --bf-inline-unit: 0.25rem;
   --bf-space-half: calc(var(--bf-baseline) / 2);
   --bf-space-1: var(--bf-baseline);
   --bf-space-2: calc(var(--bf-baseline) * 2);
@@ -166,10 +216,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 90rem;
   --bf-content-padding-inline: 1rem;
   --bf-measure: 40rem;
-  --bf-section-space: 4rem;
-  --bf-section-space-shallow: 1.5rem;
-  --bf-section-space-deep: 8rem;
-  --bf-strip-space: 4rem;
   --bf-grid-gap-inline: 1rem;
   --bf-grid-gap-block: 1rem;
   --bf-page-margin: 1rem;
@@ -268,8 +314,35 @@ html.u-baseline-grid::after {
  }
 
 :where(.bf-theme.bf-tier-documentation) {
-  --bf-baseline: 0.25rem;
+  /* Resolved Canonical DTCG spacing; these names always retain the pinned final matrix. */
+  --spacing-baseline: 0.25rem;
+  --spacing-gap-field-block: 0.5rem;
+  --spacing-gap-mark-inline: 0.5rem;
+  --spacing-gap-group-block: 1.5rem;
+  --spacing-gap-pattern-block: 3rem;
+  --spacing-gap-region-block: 6rem;
+  --spacing-inset-field-inline: 0.5rem;
+  --spacing-inset-action-inline: 0.75rem;
+  --spacing-inset-continuation-inline: 1.5rem;
+  --spacing-inset-surface-inline: 1rem;
+  --spacing-inset-surface-block: 1rem;
+  --spacing-inset-strip-block: 3rem;
+  /* Temporary BF compatibility properties alias Canonical directly during
+     the bounded public-name deprecation window. */
+  --bf-baseline: var(--spacing-baseline);
+  --bf-field-gap: var(--spacing-gap-field-block);
+  --bf-leading-mark-gap: var(--spacing-gap-mark-inline);
+  --bf-section-space-shallow: var(--spacing-gap-group-block);
+  --bf-section-space: var(--spacing-gap-pattern-block);
+  --bf-section-space-deep: var(--spacing-gap-region-block);
+  --bf-component-inline-inset-field: var(--spacing-inset-field-inline);
+  --bf-component-inline-inset-action: var(--spacing-inset-action-inline);
+  --bf-component-inline-inset-continuation: var(--spacing-inset-continuation-inline);
+  --bf-panel-padding-inline: var(--spacing-inset-surface-inline);
+  --bf-panel-padding-block: var(--spacing-inset-surface-block);
+  --bf-strip-space: var(--spacing-inset-strip-block);
   --bf-space-0: 0rem;
+  --bf-inline-unit: 0.25rem;
   --bf-space-half: calc(var(--bf-baseline) / 2);
   --bf-space-1: var(--bf-baseline);
   --bf-space-2: calc(var(--bf-baseline) * 2);
@@ -282,10 +355,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 80rem;
   --bf-content-padding-inline: 1.5rem;
   --bf-measure: 38rem;
-  --bf-section-space: 3rem;
-  --bf-section-space-shallow: 1.5rem;
-  --bf-section-space-deep: 6rem;
-  --bf-strip-space: 3rem;
   --bf-grid-gap-inline: 1.5rem;
   --bf-grid-gap-block: 1.5rem;
   --bf-page-margin: 1.5rem;
@@ -384,8 +453,35 @@ html.u-baseline-grid::after {
  }
 
 :where(.bf-theme.bf-tier-app) {
-  --bf-baseline: 0.25rem;
+  /* Resolved Canonical DTCG spacing; these names always retain the pinned final matrix. */
+  --spacing-baseline: 0.25rem;
+  --spacing-gap-field-block: 0.5rem;
+  --spacing-gap-mark-inline: 0.25rem;
+  --spacing-gap-group-block: 0.5rem;
+  --spacing-gap-pattern-block: 1rem;
+  --spacing-gap-region-block: 2rem;
+  --spacing-inset-field-inline: 0.25rem;
+  --spacing-inset-action-inline: 0.75rem;
+  --spacing-inset-continuation-inline: 1.5rem;
+  --spacing-inset-surface-inline: 0.75rem;
+  --spacing-inset-surface-block: 0.75rem;
+  --spacing-inset-strip-block: 3rem;
+  /* Temporary BF compatibility properties alias Canonical directly during
+     the bounded public-name deprecation window. */
+  --bf-baseline: var(--spacing-baseline);
+  --bf-field-gap: var(--spacing-gap-field-block);
+  --bf-leading-mark-gap: var(--spacing-gap-mark-inline);
+  --bf-section-space-shallow: var(--spacing-gap-group-block);
+  --bf-section-space: var(--spacing-gap-pattern-block);
+  --bf-section-space-deep: var(--spacing-gap-region-block);
+  --bf-component-inline-inset-field: var(--spacing-inset-field-inline);
+  --bf-component-inline-inset-action: var(--spacing-inset-action-inline);
+  --bf-component-inline-inset-continuation: var(--spacing-inset-continuation-inline);
+  --bf-panel-padding-inline: var(--spacing-inset-surface-inline);
+  --bf-panel-padding-block: var(--spacing-inset-surface-block);
+  --bf-strip-space: var(--spacing-inset-strip-block);
   --bf-space-0: 0rem;
+  --bf-inline-unit: 0.25rem;
   --bf-space-half: calc(var(--bf-baseline) / 2);
   --bf-space-1: var(--bf-baseline);
   --bf-space-2: calc(var(--bf-baseline) * 2);
@@ -398,10 +494,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 60rem;
   --bf-content-padding-inline: 1rem;
   --bf-measure: 40rem;
-  --bf-section-space: 1rem;
-  --bf-section-space-shallow: 0.5rem;
-  --bf-section-space-deep: 2rem;
-  --bf-strip-space: 3rem;
   --bf-grid-gap-inline: 1.5rem;
   --bf-grid-gap-block: 1.5rem;
   --bf-page-margin: 2rem;
@@ -500,8 +592,35 @@ html.u-baseline-grid::after {
  }
 
 :where(.bf-theme.bf-tier-os) {
-  --bf-baseline: 0.25rem;
+  /* Resolved Canonical DTCG spacing; these names always retain the pinned final matrix. */
+  --spacing-baseline: 0.25rem;
+  --spacing-gap-field-block: 0.25rem;
+  --spacing-gap-mark-inline: 0.25rem;
+  --spacing-gap-group-block: 1.5rem;
+  --spacing-gap-pattern-block: 3rem;
+  --spacing-gap-region-block: 6rem;
+  --spacing-inset-field-inline: 0.25rem;
+  --spacing-inset-action-inline: 0.5rem;
+  --spacing-inset-continuation-inline: 1.25rem;
+  --spacing-inset-surface-inline: 0.5rem;
+  --spacing-inset-surface-block: 0.5rem;
+  --spacing-inset-strip-block: 2rem;
+  /* Temporary BF compatibility properties alias Canonical directly during
+     the bounded public-name deprecation window. */
+  --bf-baseline: var(--spacing-baseline);
+  --bf-field-gap: var(--spacing-gap-field-block);
+  --bf-leading-mark-gap: var(--spacing-gap-mark-inline);
+  --bf-section-space-shallow: var(--spacing-gap-group-block);
+  --bf-section-space: var(--spacing-gap-pattern-block);
+  --bf-section-space-deep: var(--spacing-gap-region-block);
+  --bf-component-inline-inset-field: var(--spacing-inset-field-inline);
+  --bf-component-inline-inset-action: var(--spacing-inset-action-inline);
+  --bf-component-inline-inset-continuation: var(--spacing-inset-continuation-inline);
+  --bf-panel-padding-inline: var(--spacing-inset-surface-inline);
+  --bf-panel-padding-block: var(--spacing-inset-surface-block);
+  --bf-strip-space: var(--spacing-inset-strip-block);
   --bf-space-0: 0rem;
+  --bf-inline-unit: 0.25rem;
   --bf-space-half: calc(var(--bf-baseline) / 2);
   --bf-space-1: var(--bf-baseline);
   --bf-space-2: calc(var(--bf-baseline) * 2);
@@ -514,10 +633,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 60rem;
   --bf-content-padding-inline: 0.75rem;
   --bf-measure: 30rem;
-  --bf-section-space: 3rem;
-  --bf-section-space-shallow: 1.5rem;
-  --bf-section-space-deep: 6rem;
-  --bf-strip-space: 2rem;
   --bf-grid-gap-inline: 1rem;
   --bf-grid-gap-block: 1rem;
   --bf-page-margin: 1rem;
@@ -1223,63 +1338,109 @@ html.u-baseline-grid::after {
   --bf-border-width: 0.0625rem;
   --bf-bar-thickness: 0.1875rem;
   --bf-radius: 0rem;
-  --bf-control-block-padding: 0.5rem;
-  --bf-control-block-padding-compact: 0.25rem;
-  --bf-control-box-size: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding) * 2));
-  --bf-control-box-size-compact: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding-compact) * 2));
-  --bf-control-inline-padding: 1rem;
-  --bf-control-inline-padding-action: 1rem;
-  --bf-control-inline-padding-field: 0.5rem;
+  --bf-component-inline-inset-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
   --bf-control-visual-size: 1rem;
-  --bf-field-gap: 0.5rem;
-  --bf-panel-padding-inline: 1rem;
-  --bf-panel-padding-block: 1rem;
-  --bf-accordion-indent: 1.5rem;
-  /* Action surfaces keep comfortable command targets; field surfaces can tighten independently. */
-  --bf-disclosure-gap: 1rem;
-  --bf-disclosure-icon-inline-size: 1rem;
-  --bf-icon-label-inline-offset: calc(var(--bf-disclosure-icon-inline-size) + var(--bf-disclosure-gap));
-  --bf-disclosure-label-inline-offset: var(--bf-icon-label-inline-offset);
-  /* Every component-owned inline start resolves to one of these three rails.
-     Field and action values remain tier inputs; continuation is the shared
-     icon/mark-to-copy line. Structural page, grid and navigation-depth offsets
-     are deliberately outside this component inset contract. */
-  --bf-component-inline-inset-field: var(--bf-control-inline-padding-field);
-  --bf-component-inline-inset-action: var(--bf-control-inline-padding-action);
-  --bf-component-inline-inset-continuation: var(--bf-disclosure-label-inline-offset);
-  --bf-input-block-padding: var(--bf-body-nudge-start, 0.41rem);
-  --bf-button-block-padding: var(--bf-body-nudge-start, 0.41rem);
-  /* One border-aware occupied-block contract for body-sized, single-line UI.
-     Components may paint their block borders differently, but their text line,
-     padding and trailing baseline compensation must resolve through this pair. */
-  --bf-single-line-row-padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
-  --bf-single-line-row-margin-block-end: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-button-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
-  --bf-single-line-row-block-size: calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-single-line-row-padding-block) * 2) + (var(--bf-border-width) * 2) + var(--bf-single-line-row-margin-block-end));
-  --bf-single-line-row-in-box-padding-block-start: var(--bf-body-nudge-start, 0.41rem);
-  --bf-single-line-row-in-box-padding-block-end: max(0rem, calc(var(--bf-single-line-row-block-size) - var(--bf-body-line-height, 1.5rem) - var(--bf-single-line-row-in-box-padding-block-start)));
-  --bf-single-line-row-visual-offset: calc(var(--bf-body-nudge-start, 0.41rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-control-visual-size)) / 2));
-  /* Auxiliary surfaces may opt into a host-owned nested composition. The
-     shorter line and capped symmetric padding fit their complete paint inside
-     the host body line without introducing a second row rhythm. */
-  --bf-nested-auxiliary-line-height: max(var(--bf-body-font-size), calc(var(--bf-body-line-height) - var(--bf-baseline)));
-  --bf-nested-auxiliary-padding-block: min(var(--bf-single-line-row-padding-block), max(0rem, calc((var(--bf-body-line-height) - var(--bf-nested-auxiliary-line-height)) / 2)));
-  --bf-slider-track-size: calc(var(--bf-baseline) * 0.25);
-  --bf-slider-row-block-size: var(--bf-single-line-row-block-size);
-  --bf-slider-track-offset: calc(var(--bf-body-nudge-start, 0.41rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-slider-track-size)) / 2));
-  --bf-table-row-border-size: var(--bf-border-width);
-  --bf-table-row-padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
-  --bf-table-row-block-size: var(--bf-single-line-row-block-size);
-  --bf-table-row-padding-block-end: max(0rem, calc(var(--bf-table-row-block-size) - var(--bf-body-line-height, 1.5rem) - var(--bf-table-row-padding-block-start) - var(--bf-table-row-border-size)));
-  --bf-table-row-line-height: var(--bf-body-line-height, 1.5rem);
-  --bf-switch-track-offset: var(--bf-single-line-row-visual-offset);
-  --bf-tick-box-offset: var(--bf-single-line-row-visual-offset);
+  /* Three authoritative component content insets. Page margins, grid
+     gutters, surface placement and navigation depth remain structural. */
+
+  /* Regular single-line interface rows use one metric-derived occupied block.
+     Visible and transparent block borders both consume the frame slots. */
+  --bf-interface-row-line-height: var(--bf-body-line-height, 1.5rem);
+  --bf-interface-row-padding-block: max(0rem, calc(var(--bf-body-nudge-start, 0.41rem) - var(--bf-border-width)));
+  --bf-interface-row-painted-block-size: calc(var(--bf-interface-row-line-height) + (var(--bf-interface-row-padding-block) * 2) + (var(--bf-border-width) * 2));
+  --bf-interface-row-compensation-block-end: mod(calc(var(--bf-baseline) - mod(var(--bf-interface-row-painted-block-size), var(--bf-baseline))), var(--bf-baseline));
+  --bf-interface-row-occupied-block-size: calc(var(--bf-interface-row-painted-block-size) + var(--bf-interface-row-compensation-block-end));
+  --bf-interface-row-content-offset-block-start: calc(var(--bf-border-width) + var(--bf-interface-row-padding-block));
+  --bf-interface-row-visual-offset: calc(var(--bf-interface-row-content-offset-block-start) + ((var(--bf-interface-row-line-height) - var(--bf-control-visual-size)) / 2));
+
+  /* Host-owned rows keep the same occupied target but absorb compensation
+     inside the box. A ruled host subtracts its separator in its own module. */
+  --bf-in-box-row-padding-block-start: var(--bf-interface-row-content-offset-block-start);
+  --bf-in-box-row-padding-block-end: max(0rem, calc(var(--bf-interface-row-occupied-block-size) - var(--bf-interface-row-line-height) - var(--bf-in-box-row-padding-block-start)));
+
+  /* Nested children fit inside the host body line and contribute no external
+     compensation. Zero-footprint surfaces and real two-border controls use
+     the body line minus one baseline; build validation proves that this line
+     can contain the font, visual and framed ledgers for every tier. */
+  --bf-nested-row-line-height: calc(var(--bf-interface-row-line-height) - var(--bf-baseline));
+  --bf-nested-row-padding-block: max(0rem, calc((var(--bf-interface-row-line-height) - var(--bf-nested-row-line-height)) / 2));
+  --bf-nested-row-painted-block-size: calc(var(--bf-nested-row-line-height) + (var(--bf-nested-row-padding-block) * 2));
+  --bf-nested-framed-row-padding-block: max(0rem, calc((var(--bf-interface-row-line-height) - var(--bf-nested-row-line-height) - (var(--bf-border-width) * 2)) / 2));
+  --bf-nested-framed-row-painted-block-size: calc(var(--bf-nested-row-line-height) + (var(--bf-nested-framed-row-padding-block) * 2) + (var(--bf-border-width) * 2));
+  --bf-nested-framed-row-visual-offset: calc(var(--bf-border-width) + var(--bf-nested-framed-row-padding-block) + ((var(--bf-nested-row-line-height) - var(--bf-control-visual-size)) / 2));
+
+  /* Block-derived members consume one inline-minimum name. The default is
+     the regular framed paint; selectors below re-point the name to what each
+     member actually paints, rather than to the row ledger it occupies. */
+  --bf-square-block-size: var(--bf-interface-row-painted-block-size);
+
+  /* Leading marks are positioned backwards from the continuation copy inset;
+     a mark never creates a fourth content inset. */
   --bf-leading-mark-size: var(--bf-control-visual-size);
-  --bf-leading-mark-gap: var(--bf-component-inline-inset-field);
   --bf-leading-mark-offset: calc(var(--bf-leading-mark-size) + var(--bf-leading-mark-gap));
   --bf-leading-mark-group-inset: calc(var(--bf-component-inline-inset-continuation) - var(--bf-leading-mark-offset));
   --bf-tick-label-offset: var(--bf-leading-mark-offset);
+}
+
+:where(.bf-theme) :where(.bf-badge) {
+  --bf-square-block-size: var(--bf-interface-row-line-height);
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  --bf-square-block-size: var(--bf-nested-row-line-height);
+}
+
+:where(.bf-theme) :where(.bf-button.is-link.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  --bf-square-block-size: var(--bf-body-line-height);
+}
+
+:where(.bf-theme) :where(.bf-notification-close) {
+  --bf-square-block-size: var(--bf-notification-close-painted-block-size);
+}
+
+:where(.bf-theme.bf-tier-editorial) {
+  --bf-border-width: 0.0625rem;
+  --bf-bar-thickness: 0.1875rem;
+  --bf-radius: 0rem;
+  --bf-component-inline-inset-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
+  --bf-control-visual-size: 1rem;
+}
+
+:where(.bf-theme.bf-tier-documentation) {
+  --bf-border-width: 0.0625rem;
+  --bf-bar-thickness: 0.1875rem;
+  --bf-radius: 0rem;
+  --bf-component-inline-inset-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
+  --bf-control-visual-size: 0.875rem;
+}
+
+:where(.bf-theme.bf-tier-app) {
+  --bf-border-width: 0.0625rem;
+  --bf-bar-thickness: 0.1875rem;
+  --bf-radius: 0rem;
+  --bf-component-inline-inset-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
+  --bf-control-visual-size: 1rem;
+}
+
+:where(.bf-theme.bf-tier-os) {
+  --bf-border-width: 0.0625rem;
+  --bf-bar-thickness: 0.1875rem;
+  --bf-radius: 0rem;
+  --bf-component-inline-inset-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
+  --bf-control-visual-size: 0.75rem;
+}
+
+:where(.bf-theme) {
+  --bf-slider-track-size: calc(var(--bf-baseline) * 0.25);
+  --bf-slider-row-block-size: var(--bf-interface-row-occupied-block-size);
+  --bf-slider-track-offset: calc(var(--bf-body-nudge-start, 0.41rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-slider-track-size)) / 2));
+  --bf-switch-track-offset: var(--bf-interface-row-visual-offset);
+  --bf-tick-box-offset: var(--bf-interface-row-visual-offset);
   --bf-radio-dot-size: calc((var(--bf-control-visual-size) * 0.375) + var(--bf-border-width));
   --bf-list-marker-dot-size: calc(var(--bf-border-width) * 4);
+}
+
+:where(.bf-theme) {
   --bf-app-drawer-width-icon: 2rem;
   --bf-app-drawer-width-small: 15rem;
   --bf-app-drawer-width-small-max: 20rem;
@@ -1291,22 +1452,28 @@ html.u-baseline-grid::after {
   --bf-app-aside-width-max: var(--bf-app-drawer-width-medium-max);
   --bf-app-navigation-width: 15rem;
   --bf-app-navigation-width-collapsed: 3rem;
+  --bf-application-drawer-width-icon: var(--bf-app-drawer-width-icon);
+  --bf-application-drawer-width-small: var(--bf-app-drawer-width-small);
+  --bf-application-drawer-width-small-max: var(--bf-app-drawer-width-small-max);
+  --bf-application-drawer-width-medium: var(--bf-app-drawer-width-medium);
+  --bf-application-drawer-width-medium-max: var(--bf-app-drawer-width-medium-max);
+  --bf-application-drawer-width-large: var(--bf-app-drawer-width-large);
+  --bf-application-aside-width: var(--bf-app-aside-width);
+  --bf-application-aside-width-min: var(--bf-app-aside-width-min);
+  --bf-application-aside-width-max: var(--bf-app-aside-width-max);
+  --bf-application-navigation-width: var(--bf-app-navigation-width);
+  --bf-application-navigation-width-collapsed: var(--bf-app-navigation-width-collapsed);
+}
+
+:where(.bf-theme) {
+  --bf-disclosure-gap: var(--bf-leading-mark-gap);
+  --bf-disclosure-icon-inline-size: 1rem;
+  --bf-disclosure-group-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-disclosure-gap)));
   --bf-icon-label-optical-offset-block: 0.1875rem;
-  --bf-disclosure-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
+  --bf-disclosure-icon-optical-offset-block: 0rem;
   --bf-side-navigation-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
-  --bf-side-navigation-icon-gap: 0.625rem;
+  --bf-side-navigation-icon-gap: var(--bf-leading-mark-gap);
   --bf-navigation-bar-min-block-size: calc(var(--bf-baseline) * 6);
-  --bf-authoring-accent: #f6b73c;
-  --bf-authoring-accent-hover: #e0a030;
-  --bf-authoring-accent-line: rgba(246, 183, 60, 0.9);
-  --bf-authoring-accent-strong: rgba(246, 183, 60, 0.95);
-  --bf-authoring-accent-outline: rgba(246, 183, 60, 0.4);
-  --bf-authoring-accent-outline-strong: rgba(246, 183, 60, 0.8);
-  --bf-authoring-accent-shadow: rgba(246, 183, 60, 0.22);
-  --bf-authoring-accent-focus-ring: rgba(246, 183, 60, 0.55);
-  --bf-application-resize-handle-active: var(--bf-authoring-accent-strong);
-  --bf-application-resize-handle-focus-ring: var(--bf-authoring-accent-focus-ring);
-  --bf-control-inline-padding-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
   --bf-top-navigation-link-padding-inline: var(--bf-component-inline-inset-action);
   --bf-top-navigation-end-slot-inline-size: calc(1rem + var(--bf-component-inline-inset-field));
   --bf-top-navigation-search-toggle-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
@@ -1320,30 +1487,9 @@ html.u-baseline-grid::after {
   --bf-top-navigation-logo-icon-optical-offset-inline: -0.0125rem;
   --bf-navigation-brand-line-center-block: calc(var(--bf-top-navigation-logo-tag-block-size) - var(--bf-top-navigation-logo-icon-bottom-offset) - (var(--bf-top-navigation-logo-icon-size) / 2));
   --bf-navigation-brand-block-size: calc(var(--bf-navigation-brand-line-center-block) * 2);
-  --bf-icon-size-default: 1rem;
-  --bf-icon-size-medium: 2.5rem;
-  --bf-icon-size-large: 4rem;
-  --bf-icon-size-x-large: 4.5rem;
-  --bf-icon-size-xx-large: 6rem;
-  --bf-leading-icon-size: var(--bf-leading-mark-size);
-  --bf-leading-icon-gap: var(--bf-leading-mark-gap);
-  --bf-leading-icon-offset: var(--bf-single-line-row-visual-offset);
-  --bf-ui-chip-padding-inline: var(--bf-component-inline-inset-field);
-  --bf-ui-chip-radius: 999rem;
-  --bf-ui-badge-padding-inline: calc(var(--bf-body-line-height, 1.5rem) * 0.25);
-  --bf-ui-badge-overhang: calc(var(--bf-ui-badge-padding-inline) * -0.75);
-  --bf-grid-max-inline-size: var(--bf-content-max-width);
-  --bf-application-drawer-width-icon: var(--bf-app-drawer-width-icon);
-  --bf-application-drawer-width-small: var(--bf-app-drawer-width-small);
-  --bf-application-drawer-width-small-max: var(--bf-app-drawer-width-small-max);
-  --bf-application-drawer-width-medium: var(--bf-app-drawer-width-medium);
-  --bf-application-drawer-width-medium-max: var(--bf-app-drawer-width-medium-max);
-  --bf-application-drawer-width-large: var(--bf-app-drawer-width-large);
-  --bf-application-aside-width: var(--bf-app-aside-width);
-  --bf-application-aside-width-min: var(--bf-app-aside-width-min);
-  --bf-application-aside-width-max: var(--bf-app-aside-width-max);
-  --bf-application-navigation-width: var(--bf-app-navigation-width);
-  --bf-application-navigation-width-collapsed: var(--bf-app-navigation-width-collapsed);
+}
+
+:where(.bf-theme) {
   --bf-color-text-default: var(--vf-color-text-default, var(--bf-color-text, #000000));
   --bf-color-text-muted: var(--vf-color-text-muted, var(--bf-color-muted, rgba(0, 0, 0, 0.6)));
   --bf-color-text-inactive: var(--vf-color-text-inactive, rgba(0, 0, 0, 0.75));
@@ -1390,9 +1536,10 @@ html.u-baseline-grid::after {
   --bf-color-accent: var(--vf-color-accent, #0f95a1);
   --bf-color-brand: var(--vf-color-brand, #e95420);
   --bf-color-focus: var(--vf-color-focus, #2e96ff);
+  --bf-application-resize-handle-active: rgba(246, 183, 60, 0.95);
+  --bf-application-resize-handle-focus-ring: rgba(246, 183, 60, 0.55);
 
   --bf-ui-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 6.25 8 10l3.75-3.75'/%3E%3C/svg%3E");
-  --bf-ui-icon-number-stepper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 5.75 8 2l3.75 3.75M4.25 10.25 8 14l3.75-3.75'/%3E%3C/svg%3E");
   --bf-ui-icon-close: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
   --bf-ui-icon-error-grey: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='%23111' fill-rule='evenodd'/%3E%3C/svg%3E");
   --bf-ui-icon-search: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='%23111' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -1413,94 +1560,9 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme.bf-engine-cap) :where(.bf-input, input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea, select) {
-  margin-bottom: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
-}
-
-:where(.bf-theme.bf-tier-editorial) {
-  --bf-input-block-padding: 0.41rem;
-  --bf-button-block-padding: 0.41rem;
-  --bf-border-width: 0.0625rem;
-  --bf-bar-thickness: 0.1875rem;
-  --bf-radius: 0rem;
-  --bf-control-block-padding: 0.5rem;
-  --bf-control-block-padding-compact: 0.25rem;
-  --bf-control-box-size: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding) * 2));
-  --bf-control-box-size-compact: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding-compact) * 2));
-  --bf-control-inline-padding: 1rem;
-  --bf-control-inline-padding-action: 1rem;
-  --bf-control-inline-padding-field: 0.5rem;
-  --bf-control-visual-size: 1rem;
-  --bf-field-gap: 0.5rem;
-  --bf-panel-padding-inline: 1rem;
-  --bf-panel-padding-block: 1rem;
-  --bf-accordion-indent: 1.5rem;
-
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
 }
 
-:where(.bf-theme.bf-tier-documentation) {
-  --bf-input-block-padding: 0.0775rem;
-  --bf-button-block-padding: 0.0775rem;
-  --bf-border-width: 0.0625rem;
-  --bf-bar-thickness: 0.1875rem;
-  --bf-radius: 0rem;
-  --bf-control-block-padding: 0.5rem;
-  --bf-control-block-padding-compact: 0.375rem;
-  --bf-control-box-size: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding) * 2));
-  --bf-control-box-size-compact: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding-compact) * 2));
-  --bf-control-inline-padding: 1rem;
-  --bf-control-inline-padding-action: 1rem;
-  --bf-control-inline-padding-field: 0.5rem;
-  --bf-control-visual-size: 0.875rem;
-  --bf-field-gap: 0.5rem;
-  --bf-panel-padding-inline: 1rem;
-  --bf-panel-padding-block: 1rem;
-  --bf-accordion-indent: 1.5rem;
-
-}
-
-:where(.bf-theme.bf-tier-app) {
-  --bf-input-block-padding: 0.0775rem;
-  --bf-button-block-padding: 0.0775rem;
-  --bf-border-width: 0.0625rem;
-  --bf-bar-thickness: 0.1875rem;
-  --bf-radius: 0.125rem;
-  --bf-control-block-padding: 0.5rem;
-  --bf-control-block-padding-compact: 0.375rem;
-  --bf-control-box-size: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding) * 2));
-  --bf-control-box-size-compact: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding-compact) * 2));
-  --bf-control-inline-padding: 1rem;
-  --bf-control-inline-padding-action: 1rem;
-  --bf-control-inline-padding-field: 0.25rem;
-  --bf-control-visual-size: 1rem;
-  --bf-field-gap: 0.5rem;
-  --bf-panel-padding-inline: 0.75rem;
-  --bf-panel-padding-block: 0.75rem;
-  --bf-accordion-indent: 1.5rem;
-
-}
-
-:where(.bf-theme.bf-tier-os) {
-  --bf-input-block-padding: 0.245rem;
-  --bf-button-block-padding: 0.245rem;
-  --bf-border-width: 0.0625rem;
-  --bf-bar-thickness: 0.1875rem;
-  --bf-radius: 0rem;
-  --bf-control-block-padding: 0.375rem;
-  --bf-control-block-padding-compact: 0.25rem;
-  --bf-control-box-size: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding) * 2));
-  --bf-control-box-size-compact: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding-compact) * 2));
-  --bf-control-inline-padding: 1rem;
-  --bf-control-inline-padding-action: 1rem;
-  --bf-control-inline-padding-field: 0.25rem;
-  --bf-control-visual-size: 0.75rem;
-  --bf-field-gap: 0.25rem;
-  --bf-panel-padding-inline: 0.5rem;
-  --bf-panel-padding-block: 0.5rem;
-  --bf-accordion-indent: 0.75rem;
-
-}
-
-
 :where(.bf-theme.is-dark) {
   --bf-color-text-default: var(--vf-color-text-default, var(--bf-color-text, #ffffff));
   --bf-color-text-muted: var(--vf-color-text-muted, var(--bf-color-muted, rgba(255, 255, 255, 0.6)));
@@ -1548,9 +1610,10 @@ html.u-baseline-grid::after {
   --bf-color-accent: var(--vf-color-accent, #70bbc2);
   --bf-color-brand: var(--vf-color-brand, #e95420);
   --bf-color-focus: var(--vf-color-focus, #99ccff);
+  --bf-application-resize-handle-active: rgba(246, 183, 60, 0.95);
+  --bf-application-resize-handle-focus-ring: rgba(246, 183, 60, 0.55);
 
   --bf-ui-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 6.25 8 10l3.75-3.75'/%3E%3C/svg%3E");
-  --bf-ui-icon-number-stepper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 5.75 8 2l3.75 3.75M4.25 10.25 8 14l3.75-3.75'/%3E%3C/svg%3E");
   --bf-ui-icon-close: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
   --bf-ui-icon-error-grey: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
   --bf-ui-icon-search: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -1621,7 +1684,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-field.is-range) {
   align-items: start;
-  column-gap: calc(var(--bf-baseline) * 2);
+  column-gap: var(--bf-component-inline-inset-field);
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
   row-gap: var(--bf-field-gap);
@@ -1665,13 +1728,13 @@ html.u-baseline-grid::after {
   margin: 0;
   min-inline-size: 0;
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-component-inline-inset-continuation);
+  padding-inline: var(--bf-panel-padding-inline);
   padding-block-start: var(--bf-panel-padding-block);
 }
 
 :where(.bf-theme) :where(fieldset, .bf-fieldset) > :where(legend, .bf-legend) {
   margin-bottom: 0;
-  padding-inline: calc(var(--bf-baseline) * 0.5);
+  padding-inline: var(--bf-inline-unit);
 }
 
 :where(.bf-theme) :where(.bf-input, input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea, select) {
@@ -1690,8 +1753,8 @@ html.u-baseline-grid::after {
   inline-size: 100%;
   max-inline-size: 100%;
   min-inline-size: 0;
-  margin-bottom: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
-  padding-block: max(0rem, calc(var(--bf-input-block-padding) - var(--bf-border-width)));
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-component-inline-inset-field);
 }
 
@@ -1709,8 +1772,8 @@ html.u-baseline-grid::after {
   content: "\00a0";
   grid-area: color-control;
   line-height: var(--bf-body-line-height);
-  margin-bottom: var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
   visibility: hidden;
 }
 
@@ -1719,7 +1782,7 @@ html.u-baseline-grid::after {
   block-size: auto;
   grid-area: color-control;
   inline-size: 100%;
-  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
   min-block-size: 0;
   padding: var(--bf-border-width);
 }
@@ -1750,7 +1813,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(textarea) {
   block-size: auto;
-  min-block-size: calc(var(--bf-control-box-size) * 2);
+  min-block-size: calc((var(--bf-interface-row-occupied-block-size) * 2) - var(--bf-interface-row-compensation-block-end));
   resize: vertical;
 }
 
@@ -1764,7 +1827,7 @@ html.u-baseline-grid::after {
   border: 0 solid transparent;
   box-shadow: inset 0 calc(var(--bf-border-width) * -1) 0 var(--bf-color-border-default);
   color: var(--bf-color-text-default);
-  margin-bottom: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
   max-inline-size: 100%;
   min-inline-size: 0;
   padding-block: 0;
@@ -1786,8 +1849,8 @@ html.u-baseline-grid::after {
   cursor: pointer;
   margin-inline-end: var(--bf-field-gap);
   min-block-size: 0;
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
 }
 
 :where(.bf-theme) :where(input[type='file'])::file-selector-button:hover {
@@ -1800,7 +1863,7 @@ html.u-baseline-grid::after {
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
   overflow: hidden;
-  padding-inline-end: calc(var(--bf-component-inline-inset-field) * 2.5);
+  padding-inline-end: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1809,16 +1872,14 @@ html.u-baseline-grid::after {
   font-variant-numeric: tabular-nums;
 }
 
-/* Number fields retain their native input semantics and keyboard stepping,
-   while one field-owned background paints the compact pair. Sharing select's
-   1rem canvas and end position avoids a second browser-reserved spin slot. */
+/* Keep the browser-owned number stepper. A painted replacement cannot expose
+   the native pointer targets, min/max handling, or platform accessibility. */
 :where(.bf-theme) :where(input[type='number']) {
-  appearance: textfield;
-  background-image: var(--bf-ui-icon-number-stepper);
-  background-position: right var(--bf-component-inline-inset-field) center;
-  background-repeat: no-repeat;
-  background-size: 1rem 1rem;
-  padding-inline-end: calc(var(--bf-component-inline-inset-field) * 2.5);
+  appearance: auto;
+}
+
+:where(.bf-theme) :where(select:dir(rtl)) {
+  background-position: left var(--bf-component-inline-inset-field) center;
 }
 
 :where(.bf-theme) :where(.bf-slider-input) {
@@ -1830,12 +1891,6 @@ html.u-baseline-grid::after {
   text-align: right;
 }
 
-:where(.bf-theme) :where(input[type='number'])::-webkit-inner-spin-button,
-:where(.bf-theme) :where(input[type='number'])::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
 :where(.bf-theme) :where(.bf-checkbox, .bf-radio) {
   display: grid;
   margin: 0;
@@ -1863,8 +1918,8 @@ html.u-baseline-grid::after {
   border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline-start: var(--bf-tick-label-offset);
   position: relative;
 }
@@ -2012,8 +2067,8 @@ html.u-baseline-grid::after {
   border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: inline-block;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-validation-message) {
@@ -2024,9 +2079,9 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1.5rem);
   border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-muted);
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   margin-inline-start: var(--bf-leading-mark-group-inset);
-  padding-block: var(--bf-single-line-row-padding-block);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
@@ -2209,6 +2264,23 @@ html.u-baseline-grid::after {
   outline: calc(var(--bf-baseline) * 0.25) solid var(--bf-color-focus);
 }
 
+:where(.bf-theme) {
+  --bf-icon-size-default: 1rem;
+  --bf-icon-size-medium: 2.5rem;
+  --bf-icon-size-large: 4rem;
+  --bf-icon-size-x-large: 4.5rem;
+  --bf-icon-size-xx-large: 6rem;
+  /* Vanilla's inline-icon metric aligns icon paint to the cap-height centre.
+     Half the scalable border supplies the optical lift. */
+  --bf-inline-icon-baseline-shift: calc((var(--bf-border-width) * 0.5) + ((1cap - var(--bf-icon-size-default)) / 2));
+  /* The default icon can meet the compact body line at a raster edge. Trim its
+     layout margin by one scalable border without moving its cap-centred paint. */
+  --bf-inline-icon-line-box-trim: calc(var(--bf-border-width) * -1);
+  --bf-leading-icon-size: var(--bf-leading-mark-size);
+  --bf-leading-icon-gap: var(--bf-leading-mark-gap);
+  --bf-leading-icon-offset: var(--bf-interface-row-visual-offset);
+}
+
 :where(.bf-theme) :where(.bf-icon) {
   --bf-icon-image: none;
   --bf-icon-size: var(--bf-icon-size-default);
@@ -2222,29 +2294,34 @@ html.u-baseline-grid::after {
   flex: 0 0 auto;
   inline-size: var(--bf-icon-size);
   margin: 0;
+  margin-block-start: var(--bf-inline-icon-line-box-trim);
   overflow: hidden;
   padding: 0;
   text-indent: 110vw;
   transform: var(--bf-icon-transform);
   transform-origin: center;
-  vertical-align: bottom;
+  vertical-align: calc(var(--bf-inline-icon-baseline-shift) + ((var(--bf-icon-size-default) - var(--bf-icon-size)) / 2));
   white-space: nowrap;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-medium) {
   --bf-icon-size: var(--bf-icon-size-medium);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-large) {
   --bf-icon-size: var(--bf-icon-size-large);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-x-large) {
   --bf-icon-size: var(--bf-icon-size-x-large);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-xx-large) {
   --bf-icon-size: var(--bf-icon-size-xx-large);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-search) {
@@ -2296,9 +2373,9 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-block;
-  margin-bottom: var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-align: center;
   text-decoration: none;
 }
@@ -2427,7 +2504,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-button.is-icon) {
   align-items: center;
-  column-gap: var(--bf-space-1);
+  column-gap: var(--bf-leading-mark-gap);
   display: inline-flex;
   justify-content: center;
 }
@@ -2435,21 +2512,44 @@ html.u-baseline-grid::after {
 /* An icon-only flex button has no text line box to preserve the occupied
  * control rhythm. A zero-width metric strut restores the active body line
  * without imposing a target block size or changing icon/label spacing. */
-:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label))) {
+:where(.bf-theme) :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  --bf-action-target-overflow: max(0rem, calc((24px - var(--bf-square-block-size)) / 2));
+
   column-gap: 0;
+  justify-self: start;
+  margin-inline: var(--bf-action-target-overflow);
+  min-inline-size: var(--bf-square-block-size);
+  padding-inline: 0;
+  position: relative;
 }
 
-:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label)))::before {
+:where(.bf-theme) :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label)))::before {
   block-size: var(--bf-body-line-height);
   content: "";
   inline-size: 0;
 }
 
+/* WCAG 2.2 SC 2.5.8 defines its minimum in CSS pixels. This transparent,
+ * out-of-flow box extends only the pointer target; it does not change the
+ * control's paint or occupied block geometry. */
+:where(.bf-theme) :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label)))::after {
+  block-size: max(100%, 24px);
+  content: "";
+  inline-size: max(100%, 24px);
+  left: 50%;
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  translate: -50% -50%;
+}
+
 :where(.bf-theme) :where(.bf-button-label) {
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-actions) {
+  --bf-action-target-row-gap-floor: var(--bf-baseline);
+
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -2457,6 +2557,19 @@ html.u-baseline-grid::after {
   min-inline-size: 0;
 }
 
+/* Row-gap has no single-line cost and cannot move a flex item's paint. BF's
+ * wrapping primitives therefore own a positive block-axis target separation
+ * without inspecting their descendants through :has(). */
+:where(.bf-theme) :where(.bf-actions:not(.is-nowrap)) {
+  row-gap: max(var(--bf-field-gap), var(--bf-action-target-row-gap-floor));
+}
+
+:where(.bf-theme) :where(.bf-cluster:not(.is-nowrap)) {
+  --bf-action-target-row-gap-floor: var(--bf-baseline);
+
+  row-gap: max(var(--bf-cluster-space), var(--bf-action-target-row-gap-floor));
+}
+
 :where(.bf-theme) :where(.bf-actions.is-end) {
   justify-content: flex-end;
 }
@@ -2467,11 +2580,64 @@ html.u-baseline-grid::after {
   scrollbar-width: thin;
 }
 
+/* A nowrap row becomes a clipping scrollport. Only direct icon-only targets
+ * reserve their own block overflow, so text-only strips keep their original
+ * block size and leading keyline. Existing target-owned inline margins supply
+ * the corresponding logical-edge scroll extent. */
+:where(.bf-theme) :where(.bf-actions.is-nowrap) > :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  --bf-action-target-block-clearance: var(--bf-baseline);
+
+  margin-block-end: calc(var(--bf-action-target-block-clearance) + var(--bf-interface-row-compensation-block-end));
+  margin-block-start: var(--bf-action-target-block-clearance);
+}
+
+:where(.bf-theme) :where(.bf-actions.is-nowrap) > :where(.bf-button.is-link.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  margin-block-end: var(--bf-action-target-block-clearance);
+}
+
+/* Modern CSS rounds the exact inter-row and per-edge scrollport shortfalls up
+ * to the active baseline. The one-baseline fallback is safe for built-in tiers
+ * and remains on phase in older engines. */
+@supports (row-gap: round(up, 0.0625rem, 0.0625rem)) {
+  :where(.bf-theme) :where(.bf-actions:not(.is-nowrap), .bf-cluster:not(.is-nowrap)) {
+    --bf-action-target-row-gap-floor: round(up, max(0rem, calc(24px - var(--bf-body-line-height) + var(--bf-border-width))), var(--bf-baseline));
+  }
+
+  :where(.bf-theme) :where(.bf-actions.is-nowrap) > :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+    --bf-action-target-block-clearance: round(up, max(0rem, calc((24px - var(--bf-body-line-height)) / 2)), var(--bf-baseline));
+  }
+}
+
 :where(.bf-theme) :where(.bf-actions.is-nowrap) > * {
   flex: 0 0 auto;
 }
 
 
+:where(.bf-theme) :where(input.bf-input.is-nested:not([type]), input.bf-input.is-nested[type='text'], input.bf-input.is-nested[type='number'], input.bf-input.is-nested[type='search'], input.bf-input.is-nested[type='password'], input.bf-input.is-nested[type='email'], input.bf-input.is-nested[type='url'], input.bf-input.is-nested[type='tel'], select.bf-input.is-nested, .bf-button.is-nested:not(.is-link)) {
+  line-height: var(--bf-nested-row-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-framed-row-padding-block);
+}
+
+/* Replaced textual controls retain a browser-owned intrinsic block floor even
+   after their line and padding adopt the nested contract. This derived size is the exact
+   sum of that same line, padding and real borders; it is not a density target
+   independent of the active tier. */
+:where(.bf-theme) :where(input.bf-input.is-nested:not([type]), input.bf-input.is-nested[type='text'], input.bf-input.is-nested[type='number'], input.bf-input.is-nested[type='search'], input.bf-input.is-nested[type='password'], input.bf-input.is-nested[type='email'], input.bf-input.is-nested[type='url'], input.bf-input.is-nested[type='tel'], select.bf-input.is-nested) {
+  block-size: var(--bf-nested-framed-row-painted-block-size);
+}
+
+:where(.bf-theme) :where(.bf-checkbox.is-nested, .bf-radio.is-nested) {
+  --bf-tick-box-offset: var(--bf-nested-framed-row-visual-offset);
+}
+
+:where(.bf-theme) :where(.bf-checkbox.is-nested > .bf-checkbox-label, .bf-radio.is-nested > .bf-radio-label) {
+  line-height: var(--bf-nested-row-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-framed-row-padding-block);
+}
+
+
 /* ------------------------------------------------------------------ */
 /* CTA block (Vanilla parity).                                         */
 /* Inline-row of call-to-action items (typically a heading and one or  */
@@ -2484,7 +2650,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-cta-block) {
   align-items: baseline;
-  column-gap: var(--bf-space-2);
+  column-gap: var(--bf-component-inline-inset-action);
   display: flex;
   flex-wrap: wrap;
   margin-block-end: 0;
@@ -2521,7 +2687,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-figure.is-light-inset) > :where(img, picture, video, canvas, svg, .bf-aspect) {
   background: #fff;
   box-sizing: border-box;
-  padding: var(--bf-space-2);
+  padding: var(--bf-space-2) var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-figure-caption) {
@@ -2608,7 +2774,7 @@ html.u-baseline-grid::after {
   margin: 0;
   max-inline-size: 100%;
   padding-block: var(--bf-space-2);
-  padding-inline: var(--bf-space-2);
+  padding-inline: var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-notice.is-information) {
@@ -2865,7 +3031,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-credential-header) {
   align-items: flex-start;
   display: flex;
-  gap: var(--bf-space-2);
+  gap: var(--bf-component-inline-inset-action);
   justify-content: space-between;
   min-inline-size: 0;
 }
@@ -2927,9 +3093,10 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-notification, .bf-notification.is-information, .bf-notification.is-positive, .bf-notification.is-caution, .bf-notification.is-negative) {
   --bf-notification-accent: var(--bf-color-border-information);
+  --bf-notification-close-painted-block-size: calc((var(--bf-space-1) * 2) + var(--bf-icon-size-default));
+  --bf-notification-rail-shortfall: max(0rem, calc(var(--bf-bar-thickness) + var(--bf-leading-mark-size) + var(--bf-leading-mark-gap) - var(--bf-component-inline-inset-continuation)));
   background: var(--bf-color-background-default);
   border: var(--bf-border-width) solid var(--bf-color-border-default);
-  border-inline-start: var(--bf-bar-thickness) solid var(--bf-notification-accent);
   color: var(--bf-color-text-default);
   margin-block: 0;
   max-inline-size: 100%;
@@ -2937,10 +3104,20 @@ html.u-baseline-grid::after {
   overflow-wrap: anywhere;
   padding-block-end: max(0rem, calc(var(--bf-space-half) - var(--bf-border-width)));
   padding-block-start: 0;
-  padding-inline: calc(var(--bf-icon-label-inline-offset) - var(--bf-bar-thickness)) var(--bf-space-1);
+  padding-inline: calc(var(--bf-component-inline-inset-continuation) - var(--bf-border-width)) var(--bf-component-inline-inset-action);
   position: relative;
 }
 
+:where(.bf-theme) :where(.bf-notification:not(.is-borderless))::before {
+  background: var(--bf-notification-accent);
+  content: "";
+  inline-size: var(--bf-bar-thickness);
+  inset-block: calc(var(--bf-border-width) * -1);
+  inset-inline-start: calc((var(--bf-border-width) + var(--bf-notification-rail-shortfall)) * -1);
+  pointer-events: none;
+  position: absolute;
+}
+
 :where(.bf-theme) :where(.bf-notification.is-positive) {
   --bf-notification-accent: var(--bf-color-border-positive);
 }
@@ -2960,14 +3137,16 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-notification.is-borderless) {
   border: 0;
   padding-block: 0;
-  padding-inline: calc(var(--bf-icon-size-default) + var(--bf-space-1)) 0;
+  padding-inline: calc(var(--bf-leading-mark-size) + var(--bf-leading-mark-gap)) 0;
 }
 
 :where(.bf-theme) :where(.bf-notification-icon) {
+  --bf-icon-size: var(--bf-leading-mark-size);
   background-color: var(--bf-notification-accent);
   background-image: none;
-  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-h6-nudge-start) - var(--bf-border-width));
-  inset-inline-start: calc(var(--bf-icon-label-inline-offset) - var(--bf-bar-thickness) - var(--bf-icon-size-default) - var(--bf-space-1));
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-leading-mark-size)) / 2) + var(--bf-h6-nudge-start) - var(--bf-border-width));
+  inset-inline-start: calc(var(--bf-component-inline-inset-continuation) - var(--bf-border-width) - var(--bf-leading-mark-size) - var(--bf-leading-mark-gap));
+  margin-block-start: 0;
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-.75 5.25h1.5v5h-1.5v-5zM8 3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
   mask-position: center;
   mask-repeat: no-repeat;
@@ -2988,12 +3167,12 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless > .bf-notification-icon) {
-  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-h6-nudge-start));
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-leading-mark-size)) / 2) + var(--bf-h6-nudge-start));
   inset-inline-start: 0;
 }
 
 :where(.bf-theme) :where(.bf-notification.is-inline > .bf-notification-icon) {
-  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start) - var(--bf-border-width));
+  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-leading-mark-size)) / 2) + var(--bf-body-nudge-start) - var(--bf-border-width));
 }
 
 :where(.bf-theme) :where(.bf-notification-content, .bf-notification-meta) {
@@ -3005,7 +3184,7 @@ html.u-baseline-grid::after {
   /* Neutralise the shell's top border so the first metric role starts on-grid. */
   margin-block: calc(var(--bf-border-width) * -1) 0;
   padding-block-start: 0;
-  padding-inline-end: calc(var(--bf-icon-size-default) + var(--bf-space-1));
+  padding-inline-end: var(--bf-notification-close-painted-block-size);
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-content) {
@@ -3049,9 +3228,9 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-notification-close) {
-  block-size: calc((var(--bf-space-1) * 2) + var(--bf-icon-size-default));
+  block-size: var(--bf-square-block-size);
   border: 0;
-  inline-size: var(--bf-icon-size-default);
+  inline-size: var(--bf-square-block-size);
   margin-block-end: 0;
   padding: 0;
   position: absolute;
@@ -3069,11 +3248,11 @@ html.u-baseline-grid::after {
   border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
   display: flex;
   flex-wrap: wrap;
-  gap: var(--bf-space-1) var(--bf-space-2);
+  gap: var(--bf-space-1) var(--bf-component-inline-inset-action);
   justify-content: space-between;
   margin-block-end: 0;
   padding-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
-  padding-inline-end: var(--bf-space-2);
+  padding-inline-end: var(--bf-component-inline-inset-action);
 }
 
 :where(.bf-theme) :where(.bf-notification.is-inline .bf-notification-meta) {
@@ -3092,7 +3271,7 @@ html.u-baseline-grid::after {
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--bf-space-1) var(--bf-space-2);
+  gap: var(--bf-space-1) var(--bf-component-inline-inset-action);
   margin-inline-start: auto;
   min-inline-size: 0;
 }
@@ -3119,10 +3298,12 @@ html.u-baseline-grid::after {
   cursor: inherit;
   display: inline-block;
   font: inherit;
-  margin: -0.125rem calc(var(--bf-space-half) * -1);
+  margin-block: -0.125rem;
+  margin-inline: calc((var(--bf-component-inline-inset-field) / 2) * -1);
   max-inline-size: 100%;
   overflow: hidden;
-  padding: 0.125rem var(--bf-space-half);
+  padding-block: 0.125rem;
+  padding-inline: calc(var(--bf-component-inline-inset-field) / 2);
   text-align: inherit;
   text-decoration: inherit;
   text-overflow: inherit;
@@ -3155,9 +3336,10 @@ html.u-baseline-grid::after {
   content: "";
   display: inline-block;
   inline-size: var(--bf-icon-size-default);
-  margin-inline-start: var(--bf-space-half);
+  margin-block-start: var(--bf-inline-icon-line-box-trim);
+  margin-inline-start: calc(var(--bf-leading-mark-gap) / 2);
   opacity: 0;
-  vertical-align: calc((1cap - var(--bf-icon-size-default)) / 2);
+  vertical-align: var(--bf-inline-icon-baseline-shift);
 }
 
 :where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
@@ -3210,7 +3392,7 @@ html.u-baseline-grid::after {
 
   :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody) {
     display: grid;
-    gap: 0 var(--bf-space-3);
+    gap: 0 var(--bf-component-inline-inset-continuation);
     grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
     inline-size: 100%;
   }
@@ -3220,7 +3402,7 @@ html.u-baseline-grid::after {
     display: block;
     margin-block-end: calc(var(--bf-space-3) - (var(--bf-border-width) * 2));
     min-inline-size: 0;
-    padding-inline: var(--bf-space-2);
+    padding-inline: var(--bf-panel-padding-inline);
   }
 
   :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody > tr > :where(th, td)) {
@@ -3281,7 +3463,7 @@ html.u-baseline-grid::after {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  column-gap: var(--bf-space-4);
+  column-gap: var(--bf-component-inline-inset-continuation);
   min-inline-size: 0;
   padding-block: var(--bf-space-1);
 }
@@ -3454,7 +3636,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-media-object-meta) {
   align-items: start;
-  column-gap: var(--bf-space-1);
+  column-gap: var(--bf-leading-mark-gap);
   display: grid;
   grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
   min-inline-size: 0;
@@ -3721,10 +3903,10 @@ html.u-baseline-grid::after {
   text-underline-offset: 0.12em;
 }
 
-/* A balanced section switches at the shared readable 50/50 threshold. The
+/* A balanced section switches at the standard medium container threshold. The
    layout descendant reacts to the root container; the query never tries to
    restyle the container that established it. */
-@container bf-basic-section (width >= 45rem) {
+@container bf-basic-section (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-basic-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3874,7 +4056,7 @@ html.u-baseline-grid::after {
 
 /* Current Vanilla scopes a one-spacing-unit icon/value gap to the hero. */
 :where(.bf-theme) :where(.bf-hero-chip.bf-chip) {
-  column-gap: var(--bf-space-1);
+  column-gap: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-hero-media > :where(img, picture, video, canvas, svg), .bf-hero-signpost > :where(img, picture, video, canvas, svg)) {
@@ -3923,6 +4105,13 @@ html.u-baseline-grid::after {
   }
 }
 
+/* A compact ruled hero keeps the same half-rem clearance as the native rule
+   primitive. The border occupies one pixel of that clearance, just as the
+   rule's compensated trailing margin does. */
+:where(.bf-theme) :where(.bf-hero.is-top-flush) {
+  padding-block-start: calc(0.5rem - var(--bf-border-width));
+}
+
 @container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);
@@ -4460,9 +4649,8 @@ html.u-baseline-grid::after {
   overscroll-behavior: contain;
 }
 
-/* Panel chrome and content consume the live page-grid gutter through a local
- * derived property, so their internal text rails follow the same
- * viewport brackets as surrounding page content. */
+/* Panel chrome and content share the continuation component inset through a
+ * local property. Structural surface padding remains a separate contract. */
 :where(.bf-theme) :where(.bf-panel-header) {
   align-items: start;
   display: flex;
@@ -4471,7 +4659,7 @@ html.u-baseline-grid::after {
   justify-content: space-between;
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline: var(--bf-panel-content-padding-inline);
 }
 
 /* A navigation brand keeps the Canonical tag attached to the panel's top edge
@@ -4481,7 +4669,7 @@ html.u-baseline-grid::after {
   gap: 0;
   padding-block: 0;
   padding-inline-end: 0;
-  padding-inline-start: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline-start: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
@@ -4508,10 +4696,10 @@ html.u-baseline-grid::after {
   flex-wrap: wrap;
   gap: var(--bf-field-gap);
   justify-content: space-between;
-  min-block-size: calc(var(--bf-control-box-size-compact) + var(--bf-panel-padding-block));
+  min-block-size: calc(var(--bf-interface-row-occupied-block-size) + var(--bf-panel-padding-block));
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: 0;
-  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-panel-footer.is-sticky) {
@@ -4550,16 +4738,16 @@ html.u-baseline-grid::after {
   align-items: center;
   appearance: none;
   background: transparent;
-  border: 0;
+  border: 0 solid transparent;
+  border-block-width: var(--bf-border-width);
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   justify-content: flex-start;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   min-inline-size: 0;
-  padding-block: var(--bf-control-block-padding-compact);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: 0;
   text-align: left;
 }
@@ -4582,7 +4770,7 @@ html.u-baseline-grid::after {
   min-block-size: 0;
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-panel-content.is-flush) {
@@ -4707,7 +4895,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-option-grid) {
   display: grid;
-  gap: calc(var(--bf-baseline) * 2.5);
+  gap: var(--bf-component-inline-inset-action);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
 }
 
@@ -4720,7 +4908,7 @@ html.u-baseline-grid::after {
   display: grid;
   gap: var(--bf-field-gap);
   margin: 0;
-  min-block-size: calc((var(--bf-control-box-size) * 2) + var(--bf-baseline));
+  min-block-size: calc((var(--bf-interface-row-occupied-block-size) * 2) + var(--bf-baseline));
   min-inline-size: 0;
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
   padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
@@ -4917,7 +5105,7 @@ html.u-baseline-grid::after {
   grid-template-rows: minmax(0, 1fr);
   min-inline-size: 0;
   overflow: hidden;
-  padding-inline: var(--bf-space-2);
+  padding-inline: var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-content-card-primary, .bf-content-card-description-panel) {
@@ -5022,7 +5210,7 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-muted);
   display: flex;
   flex-wrap: wrap;
-  gap: 0 var(--bf-space-half);
+  gap: 0 var(--bf-leading-mark-gap);
   min-inline-size: 0;
   padding-block-end: var(--bf-space-1);
 }
@@ -5074,7 +5262,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-content-card-footer-inner) {
   align-items: center;
   display: flex;
-  gap: var(--bf-space-1);
+  gap: var(--bf-leading-mark-gap);
   inline-size: 100%;
   mask-image: linear-gradient(to right, #000 85%, transparent 100%);
   min-block-size: var(--bf-space-4);
@@ -5082,7 +5270,7 @@ html.u-baseline-grid::after {
   overflow-x: auto;
   padding-block-end: var(--bf-space-1);
   padding-block-start: calc(0.5rem - var(--bf-border-width));
-  padding-inline: var(--bf-space-2);
+  padding-inline: var(--bf-panel-padding-inline);
   position: relative;
   scrollbar-width: none;
   z-index: 2;
@@ -5105,7 +5293,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-content-card-resource) {
   align-items: center;
   display: inline-flex;
-  gap: var(--bf-space-half);
+  gap: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-content-card-resource > *) {
@@ -5114,7 +5302,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-content-card-footer .bf-chip) {
   margin: 0;
-  margin-inline-end: var(--bf-space-3);
+  margin-inline-end: var(--bf-component-inline-inset-continuation);
 }
 
 /* Internal geometry responds to the card's allocated width. The card root is
@@ -5133,10 +5321,10 @@ html.u-baseline-grid::after {
 
 @container bf-content-card (width >= 28.75rem) {
   :where(.bf-theme) :where(.bf-content-card:is(.is-cols-4, .is-cols-6)) :where(.bf-content-card-frame) {
-    column-gap: var(--bf-space-2);
+    column-gap: var(--bf-panel-padding-inline);
     flex-direction: row;
     min-block-size: calc((var(--bf-space-12) * 2) - (var(--bf-border-width) * 2));
-    padding: var(--bf-space-2) var(--bf-space-2) 0;
+    padding: var(--bf-space-2) var(--bf-panel-padding-inline) 0;
   }
 
   :where(.bf-theme) :where(.bf-content-card:is(.is-cols-4, .is-cols-6):not(.is-image)) :where(.bf-content-card-frame) {
@@ -5182,7 +5370,7 @@ html.u-baseline-grid::after {
   }
 
   :where(.bf-theme) :where(.bf-content-card.is-image-top:is(.is-cols-4, .is-cols-6)) :where(.bf-content-card-body, .bf-content-card-footer-inner) {
-    padding-inline: var(--bf-space-2);
+    padding-inline: var(--bf-panel-padding-inline);
   }
 }
 
@@ -5207,7 +5395,8 @@ html.u-baseline-grid::after {
     block-size: 100%;
     grid-column: 2;
     grid-row: 1;
-    padding: var(--bf-space-1) var(--bf-space-1) 0;
+    padding-block: var(--bf-space-1) 0;
+    padding-inline: var(--bf-component-inline-inset-field);
   }
 
   :where(.bf-theme) :where(.bf-content-card.is-cols-8) :where(.bf-content-card-image) {
@@ -5310,11 +5499,11 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-muted);
   cursor: pointer;
   display: flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   justify-content: center;
   margin-bottom: 0;
-  padding-block-end: calc(var(--bf-single-line-row-padding-block) + var(--bf-single-line-row-margin-block-end));
-  padding-block-start: var(--bf-single-line-row-padding-block);
+  padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+  padding-block-start: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
@@ -5357,7 +5546,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-tabs.is-equal) :where(.bf-tabs-list) {
   display: grid;
-  gap: calc(var(--bf-baseline) * 2);
+  gap: var(--bf-component-inline-inset-action);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bf-ui-tabs-equal-min)), 1fr));
   overflow: visible;
   white-space: normal;
@@ -5387,11 +5576,11 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: grid;
-  gap: calc(var(--bf-baseline) * 0.75);
+  gap: var(--bf-leading-mark-gap);
   grid-template-columns: auto minmax(0, 1fr) auto;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   min-inline-size: 0;
-  padding-block: var(--bf-single-line-row-padding-block);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-component-inline-inset-field);
 }
 
@@ -5469,7 +5658,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-inline-options-options) {
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--bf-baseline) * 3);
+  gap: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-inline-options-option) {
@@ -5522,11 +5711,11 @@ html.u-baseline-grid::after {
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
   max-inline-size: 100%;
   overflow: hidden;
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -5573,7 +5762,7 @@ html.u-baseline-grid::after {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--bf-baseline) * 0.5) calc(var(--bf-baseline) * 1.25);
+  gap: calc(var(--bf-baseline) * 0.5) var(--bf-leading-mark-gap);
   list-style: none;
   margin: 0;
   min-inline-size: 0;
@@ -5596,7 +5785,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-breadcrumbs-item) + :where(.bf-breadcrumbs-item)::before {
   color: var(--bf-color-text-muted);
   content: "/";
-  margin-inline-end: calc(var(--bf-baseline) * 0.75);
+  margin-inline-end: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-breadcrumbs-item) a {
@@ -5721,9 +5910,9 @@ html.u-baseline-grid::after {
   box-sizing: border-box;
   color: var(--bf-color-text-default);
   display: grid;
-  column-gap: var(--bf-space-2);
+  column-gap: var(--bf-leading-mark-gap);
   grid-template-rows: auto auto;
-  inline-size: calc((100cqi - var(--bf-space-2)) / 2);
+  inline-size: calc((100cqi - var(--bf-leading-mark-gap)) / 2);
   min-inline-size: 0;
   padding-block: calc(var(--bf-space-2) + (var(--bf-baseline) / 4) - var(--bf-border-width));
   position: relative;
@@ -5748,7 +5937,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-article-pagination-link.is-previous) {
   grid-column: 1;
   grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
-  padding-inline: var(--bf-space-1) var(--bf-space-2);
+  padding-inline: var(--bf-leading-mark-gap) var(--bf-component-inline-inset-action);
   text-align: start;
 }
 
@@ -5756,7 +5945,7 @@ html.u-baseline-grid::after {
   grid-column: 2;
   grid-template-columns: minmax(0, 1fr) var(--bf-icon-size-default);
   justify-self: end;
-  padding-inline: var(--bf-space-2) var(--bf-space-1);
+  padding-inline: var(--bf-component-inline-inset-action) var(--bf-leading-mark-gap);
   text-align: end;
 }
 
@@ -5798,6 +5987,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-article-pagination-direction > .bf-icon) {
   --bf-icon-size: var(--bf-icon-size-default);
+  margin-block-start: 0;
 }
 
 :where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-previous .bf-icon {
@@ -5835,7 +6025,7 @@ html.u-baseline-grid::after {
   :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child)) {
     grid-template-columns: var(--bf-icon-size-default);
     inline-size: calc(var(--bf-space-6) + var(--bf-space-1));
-    padding-inline: var(--bf-space-1);
+    padding-inline: var(--bf-leading-mark-gap);
   }
 
   :where(.bf-theme) :where(.bf-article-pagination-link.is-next:not(:only-child)) {
@@ -5888,8 +6078,8 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item) {
   border-block: var(--bf-border-width) solid transparent;
   box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-low-contrast);
-  margin-block-end: var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin-block-end: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item:first-child) {
@@ -5929,7 +6119,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(ol.bf-list.is-divided) > :where(.bf-list-item) {
   counter-increment: bf-list-counter;
   list-style: none;
-  padding-inline-start: calc(var(--bf-baseline) * 4);
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
   position: relative;
 }
 
@@ -5949,7 +6139,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-list-item) > :where(.bf-list) {
-  margin-inline-start: calc(var(--bf-baseline) * 3);
+  margin-inline-start: var(--bf-component-inline-inset-action);
   padding-block-start: var(--bf-body-nudge-end);
 }
 
@@ -5958,6 +6148,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-inline-list) {
+  --bf-inline-list-space: 0.5rem;
+
   margin: 0;
   padding: 0;
 }
@@ -5970,7 +6162,7 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1.5rem);
   display: inline-block;
   list-style: none;
-  margin-inline-end: calc(var(--bf-baseline) * 1.5);
+  margin-inline-end: var(--bf-inline-list-space);
   padding-block-end: var(--bf-body-nudge-end);
   padding-block-start: var(--bf-body-nudge-start);
 }
@@ -5980,18 +6172,21 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item) {
-  margin-inline-end: calc(var(--bf-baseline) * 1);
+  margin-inline-end: 0;
   position: relative;
 }
 
-:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item)::after {
-  content: "\2022";
-  display: inline;
-  margin-inline-start: calc(var(--bf-baseline) * 0.25);
+:where(.bf-theme) :where(.bf-inline-list.is-middot) {
+  align-items: baseline;
+  column-gap: var(--bf-inline-list-space);
+  display: flex;
+  flex-wrap: wrap;
 }
 
-:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item:last-of-type)::after {
-  content: "";
+:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item:not(:last-of-type))::after {
+  content: "\2022";
+  display: inline;
+  margin-inline-start: var(--bf-inline-list-space);
 }
 
 :where(.bf-theme) :where(.bf-skip-link) {
@@ -6003,8 +6198,8 @@ html.u-baseline-grid::after {
   background: var(--bf-color-background-alt);
   color: var(--bf-color-link-default);
   display: block;
-  left: -62.4375rem;
-  max-inline-size: calc(100vw - var(--bf-baseline));
+  inset-inline-start: -62.4375rem;
+  max-inline-size: calc(100vw - (var(--bf-inline-unit) * 2));
   position: absolute;
   text-decoration: none;
   top: -62.4375rem;
@@ -6015,16 +6210,24 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-skip-link:focus, .bf-skip-link:focus-visible) {
-  left: calc(var(--bf-baseline) * 0.5);
+  inset-inline-start: var(--bf-inline-unit);
   outline: 0.125rem solid var(--bf-color-focus);
   outline-offset: 0;
   padding-block: calc(var(--bf-baseline) * 1.5);
-  padding-inline: calc(var(--bf-baseline) * 1.5);
+  padding-inline: var(--bf-component-inline-inset-action);
   position: fixed;
   top: calc(var(--bf-baseline) * 0.5);
   z-index: 999999;
 }
 
+:where(.bf-theme) {
+  --bf-table-row-border-size: var(--bf-border-width);
+  --bf-table-row-padding-block-start: var(--bf-in-box-row-padding-block-start);
+  --bf-table-row-block-size: var(--bf-interface-row-occupied-block-size);
+  --bf-table-row-padding-block-end: max(0rem, calc(var(--bf-table-row-block-size) - var(--bf-body-line-height, 1.5rem) - var(--bf-table-row-padding-block-start) - var(--bf-table-row-border-size)));
+  --bf-table-row-line-height: var(--bf-body-line-height, 1.5rem);
+}
+
 :where(.bf-theme) :where(.bf-table-scroll) {
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -6109,6 +6312,13 @@ html.u-baseline-grid::after {
 }
 
 
+:where(.bf-theme) {
+  --bf-ui-chip-padding-inline: var(--bf-component-inline-inset-action);
+  --bf-ui-chip-radius: 999rem;
+  --bf-ui-badge-padding-inline: var(--bf-border-width);
+  --bf-ui-badge-overhang: calc(var(--bf-ui-badge-padding-inline) * -0.75);
+}
+
 :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) {
   --bf-ui-chip-border: var(--bf-color-border-neutral);
   --bf-ui-chip-border-hover: var(--bf-color-border-neutral);
@@ -6129,10 +6339,14 @@ html.u-baseline-grid::after {
   display: inline-flex;
   gap: 0;
   inline-size: fit-content;
+  justify-content: center;
   justify-self: start;
-  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-single-line-row-margin-block-end) 0;
+  margin: 0 var(--bf-component-inline-inset-field) var(--bf-interface-row-compensation-block-end) 0;
   max-inline-size: 100%;
-  padding-block: var(--bf-single-line-row-padding-block);
+  min-inline-size: min(100%, calc(var(--bf-interface-row-painted-block-size) + (var(--bf-border-width) * 2)));
+  padding-block: var(--bf-interface-row-padding-block);
+  /* Chips use the Action text keyline. The paint-derived floor only governs
+     very short dense labels, keeping them stadium-shaped rather than circular. */
   padding-inline: max(0rem, calc(var(--bf-ui-chip-padding-inline) - var(--bf-border-width)));
   position: relative;
   text-decoration: none;
@@ -6245,17 +6459,17 @@ html.u-baseline-grid::after {
   align-items: center;
   background-color: var(--bf-color-text-default);
   border-radius: 1rem;
-  box-sizing: content-box;
   color: var(--bf-color-background-default);
   display: inline-block;
+  inline-size: fit-content;
+  justify-self: start;
   margin: 0;
-  max-inline-size: 4ch;
-  min-width: calc(var(--bf-body-line-height, 1.5rem) - (var(--bf-ui-badge-padding-inline) * 2));
-  overflow: hidden;
+  min-inline-size: var(--bf-square-block-size);
   padding-block: 0;
   padding-inline: var(--bf-ui-badge-padding-inline);
   text-align: center;
   text-indent: 0;
+  white-space: nowrap;
 }
 
 :where(.bf-theme) :where(.bf-badge.is-negative) {
@@ -6266,7 +6480,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) :where(.bf-badge, .bf-badge.is-negative) {
   align-self: center;
   margin-inline-end: var(--bf-ui-badge-overhang);
-  margin-inline-start: var(--bf-ui-chip-padding-inline);
+  margin-inline-start: var(--bf-component-inline-inset-field);
 }
 
 :where(.bf-theme) :where(.bf-status-label, .bf-status-label.is-positive, .bf-status-label.is-caution, .bf-status-label.is-information, .bf-status-label.is-negative) {
@@ -6283,11 +6497,11 @@ html.u-baseline-grid::after {
   font-style: var(--bf-body-font-style, normal);
   font-weight: var(--bf-body-font-weight, 400);
   line-height: var(--bf-body-line-height, 1.5rem);
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   /* Status paint is physically symmetric and shares the same occupied block
      as a button; typography still comes from the body role. */
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-ui-chip-padding-inline);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-field);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -6317,17 +6531,21 @@ html.u-baseline-grid::after {
    carrying a second standalone occupied-row contract. This modifier is
    explicit so component density never changes merely because of ancestry. */
 :where(.bf-theme) :where(.bf-chip.is-nested, .bf-status-label.is-nested) {
-  line-height: var(--bf-nested-auxiliary-line-height);
+  line-height: var(--bf-nested-row-line-height);
   margin-block: 0;
-  padding-block: var(--bf-nested-auxiliary-padding-block);
+  padding-block: var(--bf-nested-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-chip.is-nested) {
   border: 0;
   box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border);
+  min-inline-size: min(100%, calc(var(--bf-nested-row-painted-block-size) + (var(--bf-border-width) * 2)));
+  /* The nested border is inset paint rather than box geometry, so the glyph
+     needs the complete Action inset instead of subtracting a real border. */
+  padding-inline: var(--bf-ui-chip-padding-inline);
 }
 
-/* Chip parts normally carry the standalone body line explicitly. A compact
+/* Chip parts normally carry the standalone body line explicitly. A nested
    chip must pass its reduced line through to those parts so a nested badge
    can fit without making the host row taller. */
 :where(.bf-theme) :where(.bf-chip.is-nested) :where(.bf-chip-lead, .bf-chip-value) {
@@ -6348,7 +6566,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-badge.is-nested) {
   align-self: center;
-  line-height: var(--bf-nested-auxiliary-line-height);
+  line-height: var(--bf-nested-row-line-height);
   vertical-align: middle;
 }
 
@@ -6397,7 +6615,7 @@ html.u-baseline-grid::after {
   --bf-search-box-trailing-inline-size: calc((var(--bf-search-box-action-inline-size) * 2) + var(--bf-border-width));
   display: flex;
   inline-size: 100%;
-  margin: 0 0 calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   max-inline-size: 100%;
   min-inline-size: 0;
   position: relative;
@@ -6479,7 +6697,7 @@ html.u-baseline-grid::after {
   display: flex;
   flex-wrap: wrap;
   gap: var(--bf-field-gap);
-  margin: 0 0 calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   min-block-size: 0;
   overflow: visible;
   padding: 0;
@@ -6487,7 +6705,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-search-container[aria-expanded='false']) {
-  min-block-size: var(--bf-control-box-size);
+  min-block-size: var(--bf-interface-row-painted-block-size);
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-box) {
@@ -6571,7 +6789,7 @@ html.u-baseline-grid::after {
   cursor: pointer;
   display: inline-flex;
   margin: 0;
-  padding-block: var(--bf-button-block-padding);
+  padding-block: var(--bf-body-nudge-start, 0.41rem);
   padding-inline: 0;
   position: static;
 }
@@ -6710,8 +6928,8 @@ html.u-baseline-grid::after {
   border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-component-inline-inset-continuation) var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
@@ -6748,9 +6966,9 @@ html.u-baseline-grid::after {
   cursor: pointer;
   display: flex;
   gap: var(--bf-disclosure-gap);
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: 0 calc(var(--bf-baseline) * 0.5);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-disclosure-group-inset) var(--bf-inline-unit);
   text-align: left;
   width: 100%;
 }
@@ -6786,20 +7004,21 @@ html.u-baseline-grid::after {
 
 
 :where(.bf-theme) :where(.bf-side-navigation, .bf-side-navigation.is-icons, .bf-side-navigation.is-accordion, .bf-side-navigation.is-raw-html) {
-  /* Plain navigation commands use the action rail. Icon-led rows move only their mark canvas,
-     so their copy reaches the shared continuation rail without a fourth
+  /* Plain navigation commands use the action inset. Icon-led rows move only their mark canvas,
+     so their copy reaches the shared continuation inset without a fourth
      component inset. Navigation depth is added separately below. */
-  /* Navigation copy uses one continuation rail whether a row has a leading
+  /* Navigation copy uses one continuation inset whether a row has a leading
      disclosure/icon slot or not. The mark canvas is derived backwards from
-     that rail, so iconless rows never introduce a fourth text start. */
+     that inset, so iconless rows never introduce a fourth text start. */
   --bf-side-navigation-content-inset: var(--bf-component-inline-inset-continuation);
-  --bf-side-navigation-disclosure-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-disclosure-gap)));
-  --bf-side-navigation-depth-step: var(--bf-space-2);
+  --bf-side-navigation-disclosure-inset: var(--bf-disclosure-group-inset);
+  --bf-side-navigation-depth-step: var(--bf-component-inline-inset-action);
   --bf-side-navigation-group-gap: 1.5rem;
   --bf-side-navigation-heading-list-gap: 0.5rem;
   color: var(--bf-color-text-inactive);
   display: block;
   inline-size: 100%;
+  min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-groups) {
@@ -6880,7 +7099,7 @@ html.u-baseline-grid::after {
   border-bottom: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
   margin-bottom: calc(var(--bf-baseline) * 2);
   padding-bottom: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-component-inline-inset-continuation);
+  padding-inline: var(--bf-panel-padding-inline);
   padding-top: var(--bf-panel-padding-block);
   position: sticky;
   top: 0;
@@ -6901,11 +7120,11 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   justify-content: center;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-decoration: none;
 }
 
@@ -6962,15 +7181,17 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-side-navigation-list) {
   display: grid;
-  grid-auto-rows: var(--bf-single-line-row-block-size);
+  grid-auto-rows: minmax(var(--bf-interface-row-occupied-block-size), auto);
   list-style: none;
   margin: 0;
+  min-inline-size: 0;
   padding: 0;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title) {
   display: grid;
   margin: 0;
+  min-inline-size: 0;
   position: relative;
 }
 
@@ -6987,11 +7208,15 @@ html.u-baseline-grid::after {
   border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-inactive);
   display: flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   inline-size: 100%;
   justify-content: flex-start;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  min-inline-size: 0;
+  /* A navigation row is the focus owner. Put nested interactive controls in a
+     following panel/list item rather than inside the clipped row itself. */
+  overflow: hidden;
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-side-navigation-content-inset);
   --bf-side-navigation-row-inset: var(--bf-side-navigation-content-inset);
   position: relative;
@@ -7111,7 +7336,7 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1.5rem);
   align-items: center;
   color: var(--bf-color-text-default);
-  column-gap: calc(var(--bf-baseline) * 1.5);
+  column-gap: var(--bf-leading-mark-gap);
   display: inline-flex;
   inline-size: auto;
   justify-content: flex-start;
@@ -7203,7 +7428,7 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-flex;
-  gap: calc(var(--bf-baseline) * 1);
+  gap: var(--bf-leading-mark-gap);
   inline-size: 100%;
   justify-content: flex-start;
   margin: 0;
@@ -7300,12 +7525,12 @@ html.u-baseline-grid::after {
   align-items: center;
   color: var(--bf-color-text-default);
   display: flex;
-  gap: calc(var(--bf-baseline) * 2);
+  gap: var(--bf-component-inline-inset-action);
   inline-size: 100%;
   justify-content: space-between;
   min-inline-size: 0;
   padding-block: var(--bf-top-navigation-link-padding-block);
-  padding-inline: calc(var(--bf-top-navigation-link-padding-inline) + (var(--bf-baseline) * 2)) var(--bf-top-navigation-link-padding-inline);
+  padding-inline: calc(var(--bf-top-navigation-link-padding-inline) + var(--bf-component-inline-inset-action)) var(--bf-top-navigation-link-padding-inline);
   text-align: left;
   text-decoration: none;
   white-space: nowrap;
@@ -7410,7 +7635,7 @@ html.u-baseline-grid::after {
   :where(.bf-theme) :where(.bf-top-navigation-row) {
     align-items: stretch;
     flex-direction: row;
-    gap: calc(var(--bf-baseline) * 2);
+    gap: var(--bf-component-inline-inset-action);
   }
 
   :where(.bf-theme) :where(.bf-top-navigation-banner) {
@@ -7547,8 +7772,8 @@ html.u-baseline-grid::after {
   cursor: pointer;
   inset-block-start: 0;
   margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-inline: calc(var(--bf-baseline) * 0.5);
+  min-block-size: var(--bf-interface-row-occupied-block-size);
+  padding-inline: var(--bf-inline-unit);
   position: absolute;
   right: 0;
 }
@@ -7586,8 +7811,8 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-icon) {
   align-items: center;
   display: inline-flex;
-  flex: 0 0 1rem;
-  inline-size: 1rem;
+  flex: 0 0 var(--bf-disclosure-icon-inline-size);
+  inline-size: var(--bf-disclosure-icon-inline-size);
   justify-content: center;
   transform: translateY(var(--bf-side-navigation-icon-optical-offset-block));
 }
@@ -7597,7 +7822,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  --bf-side-navigation-row-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - 1rem - var(--bf-side-navigation-icon-gap)));
+  --bf-side-navigation-row-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-side-navigation-icon-gap)));
   align-items: baseline;
   column-gap: var(--bf-side-navigation-icon-gap);
 }
@@ -7606,8 +7831,8 @@ html.u-baseline-grid::after {
    icon without collapsing the shared icon track and pulling their copy left. */
 :where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-link, .bf-side-navigation-text):not(:has(> .bf-side-navigation-icon))::before {
   content: "";
-  flex: 0 0 1rem;
-  inline-size: 1rem;
+  flex: 0 0 var(--bf-disclosure-icon-inline-size);
+  inline-size: var(--bf-disclosure-icon-inline-size);
 }
 
 /* A collapsed icon rail cannot communicate an iconless destination. Remove
@@ -7719,8 +7944,8 @@ html.u-baseline-grid::after {
   display: block;
   margin: 0;
   overflow: hidden;
-  padding-block-end: var(--bf-single-line-row-in-box-padding-block-end);
-  padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
+  padding-block-end: var(--bf-in-box-row-padding-block-end);
+  padding-block-start: var(--bf-in-box-row-padding-block-start);
   padding-inline: var(--bf-component-inline-inset-action);
   text-align: left;
   text-decoration: none;
@@ -7758,6 +7983,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-tooltip) {
+  --bf-tooltip-arrow-size: calc(var(--bf-baseline) * 0.5);
+  --bf-tooltip-arrow-offset-inline: calc(var(--bf-tooltip-arrow-size) * 1.5);
   display: inline-flex;
   position: relative;
   text-decoration: inherit;
@@ -7779,7 +8006,7 @@ html.u-baseline-grid::after {
   box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-color-border-default), 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
   color: var(--bf-color-text-default);
   inline-size: max-content;
-  left: 0;
+  inset-inline-start: 0;
   margin: 0;
   max-inline-size: min(20rem, calc(100vw - (var(--bf-baseline) * 4)));
   opacity: 0;
@@ -7803,17 +8030,17 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-tooltip-message)::before {
   block-size: 0;
-  border-bottom: calc(var(--bf-baseline) * 0.5) solid var(--bf-color-background-alt);
-  border-inline: calc(var(--bf-baseline) * 0.5) solid transparent;
+  border-bottom: var(--bf-tooltip-arrow-size) solid var(--bf-color-background-alt);
+  border-inline: var(--bf-tooltip-arrow-size) solid transparent;
   bottom: 100%;
   content: "";
   inline-size: 0;
-  left: calc(var(--bf-baseline) * 0.75);
+  inset-inline-start: var(--bf-tooltip-arrow-offset-inline);
   position: absolute;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-detached) > :where(.bf-tooltip-message) {
-  left: auto;
+  inset-inline-start: auto;
   pointer-events: auto;
   position: static;
   top: auto;
@@ -7825,23 +8052,23 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-center) > :where(.bf-tooltip-message) {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(var(--bf-baseline) - var(--bf-border-width)));
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-center) > :where(.bf-tooltip-message)::before {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-right) > :where(.bf-tooltip-message) {
-  left: auto;
-  right: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-right) > :where(.bf-tooltip-message)::before {
-  left: auto;
-  right: calc(var(--bf-baseline) * 0.75);
+  inset-inline-end: var(--bf-tooltip-arrow-offset-inline);
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-left, .bf-tooltip.is-top-center, .bf-tooltip.is-top-right) > :where(.bf-tooltip-message) {
@@ -7852,30 +8079,30 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-left, .bf-tooltip.is-top-center, .bf-tooltip.is-top-right) > :where(.bf-tooltip-message)::before {
   border-bottom: 0;
-  border-inline: calc(var(--bf-baseline) * 0.5) solid transparent;
-  border-top: calc(var(--bf-baseline) * 0.5) solid var(--bf-color-background-alt);
+  border-inline: var(--bf-tooltip-arrow-size) solid transparent;
+  border-top: var(--bf-tooltip-arrow-size) solid var(--bf-color-background-alt);
   bottom: auto;
   top: 100%;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-center) > :where(.bf-tooltip-message) {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(var(--bf-baseline) * -1));
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-center) > :where(.bf-tooltip-message)::before {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-right) > :where(.bf-tooltip-message) {
-  left: auto;
-  right: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-right) > :where(.bf-tooltip-message)::before {
-  left: auto;
-  right: calc(var(--bf-baseline) * 0.75);
+  inset-inline-end: var(--bf-tooltip-arrow-offset-inline);
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(nav.bf-pagination) {
@@ -7909,9 +8136,10 @@ html.u-baseline-grid::after {
   font-weight: var(--bf-body-font-weight, 400);
   line-height: var(--bf-body-line-height, 1.5rem);
   color: var(--bf-color-text-muted);
-  min-block-size: var(--bf-control-box-size);
-  padding-block: var(--bf-control-block-padding);
-  padding-inline: calc(var(--bf-baseline) * 0.5);
+  border-block: var(--bf-border-width) solid transparent;
+  margin-block-end: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-inline-unit);
 }
 
 :where(.bf-theme) :where(.bf-pagination-link, .bf-pagination-link.is-previous, .bf-pagination-link.is-next) {
@@ -7927,16 +8155,20 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   justify-content: center;
-  margin-bottom: var(--bf-single-line-row-margin-block-end);
-  min-inline-size: var(--bf-control-box-size);
-  padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
-  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-align: center;
   text-decoration: none;
 }
 
+:where(.bf-theme) :where(.bf-pagination-link:not(.is-previous):not(.is-next)) {
+  min-inline-size: var(--bf-square-block-size);
+  padding-inline: 0;
+}
+
 :where(.bf-theme) :where(.bf-pagination-link:hover, .bf-pagination-link.is-previous:hover, .bf-pagination-link.is-next:hover) {
   background-color: var(--bf-color-background-hover);
 }
@@ -8033,9 +8265,9 @@ html.u-baseline-grid::after {
   gap: var(--bf-disclosure-gap);
   inline-size: 100%;
   justify-content: flex-start;
-  margin-block-end: var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: 0;
+  margin-block-end: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-disclosure-group-inset) 0;
   text-align: left;
 }
 
@@ -8096,7 +8328,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-modal.is-workflow) {
-  --bf-modal-workflow-viewport-gap: calc(var(--bf-baseline) * 4);
+  --bf-modal-workflow-viewport-gap: var(--bf-component-inline-inset-continuation);
   --bf-modal-workflow-max-inline-size: 42rem;
   --bf-modal-workflow-min-inline-size: 32rem;
   --bf-modal-workflow-max-block-size: 40rem;
@@ -8136,7 +8368,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-modal-header, .bf-modal-body, .bf-modal-footer) {
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
   padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-component-inline-inset-continuation);
+  padding-inline: var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-modal-header) {
@@ -8311,7 +8543,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon) {
   cursor: copy;
-  padding-inline-start: calc(var(--bf-component-inline-inset-continuation) + (var(--bf-baseline) * 3));
+  padding-inline-start: calc(var(--bf-component-inline-inset-continuation) + var(--bf-leading-mark-gap));
   position: relative;
 }
 
@@ -8415,8 +8647,8 @@ html.u-baseline-grid::after {
  * visible and exposed at a time. */
 :where(.bf-theme) :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand) {
   align-items: start;
-  column-gap: calc(var(--bf-baseline) * 2);
-  padding-inline-end: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  column-gap: var(--bf-leading-mark-gap);
+  padding-inline-end: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-navigation-bar.is-responsive) {
@@ -8509,7 +8741,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-link, .bf-side-navigation-text) {
   align-items: center;
   justify-content: center;
-  padding-inline: calc(var(--bf-baseline) * 1.25);
+  padding-inline: var(--bf-component-inline-inset-action);
 }
 
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-list)::after {
@@ -8517,7 +8749,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-item.is-title > .bf-side-navigation-link, .bf-side-navigation-item.is-title > .bf-side-navigation-text) {
-  padding-inline: calc(var(--bf-baseline) * 1.25);
+  padding-inline: var(--bf-component-inline-inset-action);
 }
 
 :where(.bf-theme) :where(.bf-application:has(> .bf-aside.is-pinned:not(.is-collapsed))) {
@@ -8644,7 +8876,7 @@ html.u-baseline-grid::after {
   cursor: ew-resize;
   display: none;
   inset-block: 0;
-  inset-inline-start: calc(var(--bf-baseline) * -3);
+  inset-inline-start: calc(var(--bf-inline-unit) * -3);
   outline: none;
   position: absolute;
   touch-action: none;
@@ -8661,7 +8893,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle)::after {
-  background: var(--bf-color-border-default);
+  background: transparent;
   border-radius: 62.4375rem;
   content: "";
   inset-block: var(--bf-panel-padding-block);
@@ -8683,7 +8915,9 @@ html.u-baseline-grid::after {
   outline-offset: -0.125rem;
 }
 
-@media (min-width: 64.75rem) {
+/* Application navigation becomes persistent at 48rem. Standalone top and
+ * document navigation keep their own large-screen contracts. */
+@media (min-width: 48rem) {
   :where(.bf-theme) :where(.bf-application:has(> .bf-navigation)) {
     grid-template-areas:
       "navigation-bar navigation-bar"
@@ -8726,6 +8960,10 @@ html.u-baseline-grid::after {
     display: none;
   }
 
+  :where(.bf-theme) :where(.bf-application) :where(.bf-side-navigation-toggle) {
+    display: none;
+  }
+
   :where(.bf-theme) :where(.bf-navigation-drawer),
   :where(.bf-theme) :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer) {
     block-size: 100%;
@@ -8959,7 +9197,7 @@ html.u-baseline-grid::after {
   overflow: hidden;
   overflow-wrap: anywhere;
   padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
-  padding-inline: var(--bf-space-2) 0;
+  padding-inline: var(--bf-component-inline-inset-action) 0;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -9002,7 +9240,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-list .bf-in-page-navigation-list .bf-in-page-navigation-link) {
-  padding-inline-start: var(--bf-space-4);
+  padding-inline-start: calc(var(--bf-component-inline-inset-action) * 2);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle) {
@@ -9013,15 +9251,16 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1.5rem);
   align-items: center;
   background: var(--bf-color-background-default);
-  border: 0;
+  border: 0 solid transparent;
+  border-block-width: var(--bf-border-width);
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: none;
   justify-content: center;
   margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: var(--bf-space-1);
+  padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+  padding-block-start: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle:hover) {
@@ -9039,6 +9278,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle > .bf-icon) {
   --bf-icon-size: var(--bf-icon-size-default);
+  margin-block-start: 0;
 }
 
 @container bf-in-page-navigation (width < 40rem) {
@@ -9082,10 +9322,12 @@ html.u-baseline-grid::after {
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation-link) {
+    border-block: var(--bf-border-width) solid transparent;
     display: block;
     overflow: hidden;
-    padding-block: calc(var(--bf-control-block-padding-compact) - var(--bf-border-width));
-    padding-inline: var(--bf-space-1);
+    padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+    padding-block-start: var(--bf-interface-row-padding-block);
+    padding-inline: var(--bf-leading-mark-gap);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -9120,7 +9362,7 @@ html.u-baseline-grid::after {
     grid-row: 1;
     margin: 0;
     padding-block: calc(var(--bf-h6-nudge-start) + var(--bf-space-1)) calc(var(--bf-h6-nudge-end) + var(--bf-space-1));
-    padding-inline: var(--bf-space-2);
+    padding-inline: var(--bf-component-inline-inset-action);
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded > .bf-in-page-navigation-nav > .bf-in-page-navigation-list, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) > .bf-in-page-navigation-nav > .bf-in-page-navigation-list) {
@@ -9146,7 +9388,7 @@ html.u-baseline-grid::after {
     display: -webkit-box;
     overflow-wrap: anywhere;
     padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
-    padding-inline: var(--bf-space-2) 0;
+    padding-inline: var(--bf-component-inline-inset-action) 0;
     white-space: normal;
   }
 
@@ -9171,7 +9413,7 @@ html.u-baseline-grid::after {
  * controller contracts while matching Vanilla's reduced chrome. */
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) {
   background: var(--bf-color-background-alt);
-  --bf-top-navigation-link-padding-block: var(--bf-control-block-padding-compact);
+  --bf-top-navigation-reduced-row-block-size: var(--bf-interface-row-occupied-block-size);
 }
 
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-logo-tag) {
@@ -9184,10 +9426,13 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-logo) > :where(.bf-top-navigation-link),
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-link, .bf-top-navigation-menu-toggle, .bf-top-navigation-search-toggle) {
+  border: 0 solid transparent;
+  border-block-width: var(--bf-border-width);
   color: var(--bf-color-text-muted);
   font-size: var(--bf-body-font-size);
   line-height: var(--bf-body-line-height);
-  padding-block: var(--bf-top-navigation-link-padding-block);
+  padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+  padding-block-start: var(--bf-interface-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-logo.is-canonical-tagged) > :where(.bf-top-navigation-link) {
@@ -9212,7 +9457,7 @@ html.u-baseline-grid::after {
 
 @media (min-width: 64.75rem) {
   :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-dropdown) {
-    top: calc((var(--bf-top-navigation-link-padding-block) * 2) + var(--bf-body-line-height));
+    top: var(--bf-top-navigation-reduced-row-block-size);
   }
 
   :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-search) {
@@ -9221,7 +9466,7 @@ html.u-baseline-grid::after {
     box-shadow: 0 calc(var(--bf-baseline) * 0.5) calc(var(--bf-baseline) * 2) rgba(0, 0, 0, 0.16);
     inset-block-start: 100%;
     inset-inline-end: 0;
-    padding: var(--bf-control-block-padding-compact) var(--bf-top-navigation-link-padding-inline);
+    padding: var(--bf-panel-padding-block) var(--bf-top-navigation-link-padding-inline);
     position: absolute;
   }
 
@@ -9269,6 +9514,7 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   margin: 0;
   padding-block-end: 0;
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-list) {
@@ -9300,9 +9546,11 @@ html.u-baseline-grid::after {
   border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-link-default);
   display: block;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   overflow-wrap: anywhere;
-  padding-block: var(--bf-single-line-row-padding-block);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline-end: var(--bf-component-inline-inset-action);
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
   text-decoration: none;
 }
 
@@ -9326,12 +9574,12 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-list .bf-table-of-contents-list) {
-  margin-inline-start: var(--bf-space-2);
+  margin-inline-start: var(--bf-component-inline-inset-action);
 }
 
 @container bf-table-of-contents (width < 20rem) {
   :where(.bf-theme) :where(.bf-table-of-contents-list .bf-table-of-contents-list) {
-    margin-inline-start: var(--bf-space-1);
+    margin-inline-start: var(--bf-leading-mark-gap);
   }
 }
 
@@ -9430,9 +9678,9 @@ html.u-baseline-grid::after {
 }
 
 /* ------------------------------------------------------------------ */
-/* Header split (≥ 45rem): the shared readable 50/50 title/content split. */
+/* Header split (≥ 38.75rem): the standard medium 50/50 title/content split. */
 /* ------------------------------------------------------------------ */
-@container (width >= 45rem) {
+@container (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-tiered-list:not(.is-description-full-width)) :where(.bf-tiered-list-header) {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
@@ -9811,35 +10059,13 @@ html.u-baseline-grid::after {
   grid-column: 1 / -1;
 }
 
-/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
+/* Canonical app-tier preset: application chrome only. Component
+   typography and spacing resolve from the tier inputs in their source modules. */
 :where(.bf-theme.bf-tier-app) {
   --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
-  --bf-radius: 0;
   color-scheme: light;
 }
 
-:where(.bf-theme.bf-tier-app) :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message) {
-  font-family: inherit;
-  font-size: var(--bf-body-font-size);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--bf-body-line-height);
-}
-
-/* Preserve the public nested fit after the preset's general typography pass.
-   The modifier remains explicit and zero-specificity in every app scope. */
-:where(.bf-theme.bf-tier-app) :where(.bf-status-label.is-nested, .bf-chip.is-nested) {
-  line-height: var(--bf-nested-auxiliary-line-height);
-}
-
-:where(.bf-theme.bf-tier-app) :where(.bf-input, .bf-button, .bf-button.is-base) {
-  font-family: inherit;
-  font-size: var(--bf-body-font-size);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--bf-body-line-height);
-}
-
 :where(.bf-theme.bf-tier-app) :where(.bf-application) {
   background: var(--bf-app-demo-page-bg);
 }
@@ -9850,13 +10076,6 @@ html.u-baseline-grid::after {
   box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.12), 0 0 0.1875rem rgba(0, 0, 0, 0.12);
 }
 
-:where(.bf-theme.bf-tier-app) :where(.bf-panel-header) {
-  align-items: start;
-  gap: calc(var(--bf-baseline) * 1.5);
-  padding-block-end: var(--bf-panel-padding-block);
-  padding-block-start: var(--bf-panel-padding-block);
-}
-
 :where(.bf-theme.bf-tier-app) :where(.bf-panel-header.is-navigation-brand) {
   gap: 0;
   padding-block: 0;
@@ -9867,22 +10086,10 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme.bf-tier-app) :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand) {
-  gap: calc(var(--bf-baseline) * 2);
+  gap: var(--bf-leading-mark-gap);
   padding-block: 0;
 }
 
-:where(.bf-theme.bf-tier-app) :where(.bf-panel-controls) {
-  gap: calc(var(--bf-baseline) * 1.5);
-}
-
-:where(.bf-theme.bf-tier-app) :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title) {
-  font-family: inherit;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5rem;
-}
-
 :where(.bf-theme.bf-tier-app) :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true']) {
   background: transparent;
   box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
@@ -9890,8 +10097,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme.bf-tier-app) :where(.bf-navigation-bar),
 :where(.bf-theme.bf-tier-app) :where(.bf-navigation-drawer),
-:where(.bf-theme.bf-tier-app) :where(.bf-aside),
-:where(.bf-theme.bf-tier-app) :where(.bf-panel) {
+:where(.bf-theme.bf-tier-app) :where(.bf-aside) {
   background: var(--vf-color-background-default, #ffffff);
 }