baseline-foundry 0.1.6 → 0.2.0

package/dist/experiments/ibm-plex-engine-smoke/styles.css

@@ -54,8 +54,21 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) {
+  /* Theme-config spacing remains in BF's namespace; it does not claim Canonical provenance. */
   --bf-baseline: 0.5rem;
+  --bf-field-gap: 0.5rem;
+  --bf-leading-mark-gap: 0.5rem;
+  --bf-section-space-shallow: 1.5rem;
+  --bf-section-space: 4rem;
+  --bf-section-space-deep: 8rem;
+  --bf-component-inline-inset-field: 0.5rem;
+  --bf-component-inline-inset-action: 1rem;
+  --bf-component-inline-inset-continuation: 2rem;
+  --bf-panel-padding-inline: 1rem;
+  --bf-panel-padding-block: 1rem;
+  --bf-strip-space: 4rem;
   --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);
@@ -68,10 +81,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 120rem;
   --bf-content-padding-inline: 1.5rem;
   --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: 1.5rem;
   --bf-grid-gap-block: 1.5rem;
   --bf-page-margin: 1.5rem;
@@ -170,8 +179,21 @@ html.u-baseline-grid::after {
  }
 
 :where(.bf-theme.bf-surface-ubuntu-engine-smoke) {
+  /* Theme-config spacing remains in BF's namespace; it does not claim Canonical provenance. */
   --bf-baseline: 0.5rem;
+  --bf-field-gap: 0.5rem;
+  --bf-leading-mark-gap: 0.5rem;
+  --bf-section-space-shallow: 1.5rem;
+  --bf-section-space: 4rem;
+  --bf-section-space-deep: 8rem;
+  --bf-component-inline-inset-field: 0.5rem;
+  --bf-component-inline-inset-action: 1rem;
+  --bf-component-inline-inset-continuation: 2rem;
+  --bf-panel-padding-inline: 1rem;
+  --bf-panel-padding-block: 1rem;
+  --bf-strip-space: 4rem;
   --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);
@@ -184,10 +206,6 @@ html.u-baseline-grid::after {
   --bf-content-max-width: 120rem;
   --bf-content-padding-inline: 1.5rem;
   --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: 1.5rem;
   --bf-grid-gap-block: 1.5rem;
   --bf-page-margin: 1.5rem;
@@ -893,63 +911,85 @@ 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.375rem);
-  --bf-button-block-padding: var(--bf-body-nudge-start, 0.375rem);
-  /* 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.375rem);
-  --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.375rem) + ((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(1em, 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.375rem) + ((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.375rem) - 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-surface-ubuntu-engine-smoke) {
+  --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-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.375rem) + ((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;
@@ -961,22 +1001,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));
@@ -990,30 +1036,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));
@@ -1060,9 +1085,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");
@@ -1083,31 +1109,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-surface-ubuntu-engine-smoke) {
-  --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.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)));
@@ -1155,9 +1159,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");
@@ -1173,7 +1178,7 @@ html.u-baseline-grid::after {
   margin: 0;
 }
 
-.bf-theme button {
+:where(.bf-theme) :where(button) {
   font: inherit;
 }
 
@@ -1228,7 +1233,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);
@@ -1272,13 +1277,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) {
@@ -1297,8 +1302,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);
 }
 
@@ -1316,8 +1321,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;
 }
 
@@ -1326,7 +1331,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);
 }
@@ -1357,7 +1362,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;
 }
 
@@ -1371,7 +1376,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;
@@ -1393,8 +1398,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 {
@@ -1407,7 +1412,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;
 }
@@ -1416,16 +1421,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) {
@@ -1437,12 +1440,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;
@@ -1470,8 +1467,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;
 }
@@ -1619,8 +1616,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) {
@@ -1631,9 +1628,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;
 }
@@ -1816,6 +1813,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);
@@ -1829,29 +1843,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) {
@@ -1903,9 +1922,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;
 }
@@ -2034,7 +2053,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;
 }
@@ -2042,21 +2061,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;
@@ -2064,6 +2106,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;
 }
@@ -2074,11 +2129,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  */
@@ -2091,7 +2199,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;
@@ -2128,7 +2236,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) {
@@ -2215,7 +2323,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) {
@@ -2472,7 +2580,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;
 }
@@ -2534,9 +2642,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%;
@@ -2544,10 +2653,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);
 }
@@ -2567,14 +2686,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;
@@ -2595,12 +2716,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) {
@@ -2612,7 +2733,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) {
@@ -2656,9 +2777,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;
@@ -2676,11 +2797,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) {
@@ -2699,7 +2820,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;
 }
@@ -2726,10 +2847,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;
@@ -2762,9 +2885,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 {
@@ -2817,7 +2941,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%;
   }
@@ -2827,7 +2951,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)) {
@@ -2888,7 +3012,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);
 }
@@ -3061,7 +3185,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;
@@ -3328,10 +3452,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));
@@ -3481,7 +3605,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)) {
@@ -3530,6 +3654,13 @@ html.u-baseline-grid::after {
   }
 }
 
+/* A hero can keep its entry rule while placing its content directly against
+   that boundary. Scope this exception to the hero instead of publishing a
+   global padding utility. */
+:where(.bf-theme) :where(.bf-hero.is-top-flush) {
+  padding-block-start: 0;
+}
+
 @container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);
@@ -4067,9 +4198,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;
@@ -4078,7 +4208,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
@@ -4088,7 +4218,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) {
@@ -4115,10 +4245,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) {
@@ -4157,16 +4287,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;
 }
@@ -4189,7 +4319,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) {
@@ -4314,7 +4444,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));
 }
 
@@ -4327,7 +4457,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));
@@ -4524,7 +4654,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) {
@@ -4629,7 +4759,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);
 }
@@ -4681,7 +4811,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);
@@ -4689,7 +4819,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;
@@ -4712,7 +4842,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 > *) {
@@ -4721,7 +4851,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
@@ -4740,10 +4870,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) {
@@ -4789,7 +4919,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);
   }
 }
 
@@ -4814,7 +4944,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) {
@@ -4917,11 +5048,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;
 }
@@ -4964,7 +5095,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;
@@ -4994,11 +5125,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);
 }
 
@@ -5076,7 +5207,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) {
@@ -5129,11 +5260,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;
@@ -5180,7 +5311,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;
@@ -5203,7 +5334,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 {
@@ -5328,9 +5459,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;
@@ -5355,7 +5486,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;
 }
 
@@ -5363,7 +5494,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;
 }
 
@@ -5405,6 +5536,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 {
@@ -5442,7 +5574,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)) {
@@ -5495,8 +5627,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) {
@@ -5536,7 +5668,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;
 }
 
@@ -5556,7 +5688,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);
 }
 
@@ -5565,6 +5697,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-inline-list) {
+  --bf-inline-list-space: 0.5rem;
+
   margin: 0;
   padding: 0;
 }
@@ -5577,7 +5711,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);
 }
@@ -5587,18 +5721,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) {
@@ -5610,8 +5747,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;
@@ -5622,16 +5759,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;
@@ -5716,6 +5861,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);
@@ -5736,10 +5888,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;
@@ -5852,17 +6008,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) {
@@ -5873,7 +6029,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) {
@@ -5890,11 +6046,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;
@@ -5924,14 +6080,25 @@ 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 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) {
+  line-height: inherit;
 }
 
 :where(.bf-theme) :where(.bf-chip.is-nested:hover) {
@@ -5948,7 +6115,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;
 }
 
@@ -5997,7 +6164,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;
@@ -6079,7 +6246,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;
@@ -6087,7 +6254,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) {
@@ -6171,7 +6338,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.375rem);
   padding-inline: 0;
   position: static;
 }
@@ -6310,8 +6477,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;
 }
@@ -6348,9 +6515,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%;
 }
@@ -6386,20 +6553,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) {
@@ -6480,7 +6648,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;
@@ -6501,11 +6669,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;
 }
 
@@ -6562,15 +6730,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;
 }
 
@@ -6587,11 +6757,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;
@@ -6711,7 +6885,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;
@@ -6803,7 +6977,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;
@@ -6900,12 +7074,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;
@@ -7010,7 +7184,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) {
@@ -7147,8 +7321,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;
 }
@@ -7186,8 +7360,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));
 }
@@ -7197,7 +7371,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);
 }
@@ -7206,8 +7380,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
@@ -7319,8 +7493,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;
@@ -7358,6 +7532,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;
@@ -7379,7 +7555,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;
@@ -7403,17 +7579,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;
@@ -7425,23 +7601,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) {
@@ -7452,30 +7628,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) {
@@ -7509,9 +7685,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) {
@@ -7527,16 +7704,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);
 }
@@ -7633,9 +7814,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;
 }
 
@@ -7696,7 +7877,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;
@@ -7736,7 +7917,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) {
@@ -7911,7 +8092,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;
 }
 
@@ -8015,8 +8196,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) {
@@ -8109,7 +8290,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 {
@@ -8117,7 +8298,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))) {
@@ -8244,7 +8425,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;
@@ -8261,7 +8442,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);
@@ -8283,7 +8464,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"
@@ -8326,6 +8509,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%;
@@ -8559,7 +8746,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;
@@ -8602,7 +8789,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) {
@@ -8613,15 +8800,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) {
@@ -8639,6 +8827,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) {
@@ -8682,10 +8871,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;
   }
@@ -8720,7 +8911,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) {
@@ -8746,7 +8937,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;
   }
 
@@ -8771,7 +8962,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) {
@@ -8784,10 +8975,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) {
@@ -8812,7 +9006,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) {
@@ -8821,7 +9015,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;
   }
 
@@ -8869,6 +9063,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) {
@@ -8900,9 +9095,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;
 }
 
@@ -8926,12 +9123,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);
   }
 }
 
@@ -9030,9 +9227,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);
   }