baseline-foundry 0.1.4 → 0.1.6

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

@@ -28,8 +28,8 @@
   background-image: linear-gradient(
     to top,
     var(--bf-baseline-grid-color),
-    var(--bf-baseline-grid-color) 1px,
-    transparent 1px,
+    var(--bf-baseline-grid-color) 0.0625rem,
+    transparent 0.0625rem,
     transparent
   );
   background-size: 100% var(--bf-baseline-grid-size);
@@ -455,7 +455,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(a) {
   color: var(--bf-color-link);
   text-decoration: none;
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: 0.0625rem;
   text-underline-offset: 0.12em;
 }
 
@@ -468,8 +468,22 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(a:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
+}
+
+/* Standalone anchors need the same metric-owned text box as adjacent body
+ * controls. Raw anchors remain inline so prose links still participate in the
+ * surrounding line box. */
+:where(.bf-theme) :where(a.bf-text-link) {
+  display: inline-block;
+  font-family: var(--bf-body-font-family);
+  font-size: var(--bf-body-font-size);
+  font-style: var(--bf-body-font-style);
+  font-weight: var(--bf-body-font-weight);
+  line-height: var(--bf-body-line-height);
+  margin-block: 0 var(--bf-body-margin-bottom);
+  padding-block: var(--bf-body-nudge-start) 0;
 }
 
 :where(.bf-theme) :where(code) {
@@ -480,7 +494,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-page) {
   margin-inline: auto;
   max-inline-size: var(--bf-content-max-width);
-  padding-inline: max(var(--bf-page-margin), var(--bf-content-padding-inline));
+  padding-inline: var(--bf-page-margin);
 }
 
 :where(.bf-theme) :where(.bf-page.is-fill) {
@@ -563,7 +577,14 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-stack.is-flush) {
-  --bf-stack-space: 0px;
+  --bf-stack-space: 0rem;
+}
+
+/* A metric-flush stack is an explicit relationship between adjacent text
+ * roles. It retains the outer role nudges while cancelling only the preceding
+ * end compensation and following start nudge; no guessed negative gap is used. */
+:where(.bf-theme) :where(.bf-stack.is-metric-flush) {
+  --bf-stack-space: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-stack.is-extra-dense) {
@@ -591,10 +612,19 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-cluster) {
+  --bf-cluster-space: var(--bf-space-2);
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--bf-space-2);
+  gap: var(--bf-cluster-space);
+}
+
+:where(.bf-theme) :where(.bf-cluster.is-dense) {
+  --bf-cluster-space: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-cluster.is-nowrap) {
+  flex-wrap: nowrap;
 }
 
 :where(.bf-theme) :where(.bf-cluster.is-split) {
@@ -716,6 +746,14 @@ html.u-baseline-grid::after {
 }
 
 
+:where(.bf-theme) .bf-stack.is-metric-flush > :where(blockquote, p, h1, h2, h3, h4, h5, h6, .bf-body, .bf-h1, .bf-h2, .bf-h3, .bf-h4, .bf-h5, .bf-h6):has(+ :where(blockquote, p, h1, h2, h3, h4, h5, h6, .bf-body, .bf-h1, .bf-h2, .bf-h3, .bf-h4, .bf-h5, .bf-h6)) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) .bf-stack.is-metric-flush > :where(blockquote, p, h1, h2, h3, h4, h5, h6, .bf-body, .bf-h1, .bf-h2, .bf-h3, .bf-h4, .bf-h5, .bf-h6) + :where(blockquote, p, h1, h2, h3, h4, h5, h6, .bf-body, .bf-h1, .bf-h2, .bf-h3, .bf-h4, .bf-h5, .bf-h6) {
+  padding-block-start: 0;
+}
+
 /* DEMO ONLY — Cap-derived nudges are unreliable (ascender ≠ cap height).
    The approximation (line-height + 1cap) / 2 drifts at larger sizes.
    Kept as a reference for why metrics-derived nudges are used instead. */
@@ -771,10 +809,36 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(ul, ol) {
   margin-bottom: 0;
+  padding-block-end: 0;
 }
 
-:where(.bf-theme) :where(.bf-prose ul, .bf-prose ol) {
-  padding-inline-start: var(--bf-space-4);
+:where(.bf-theme) :where(.bf-prose ol) {
+  padding-inline-start: calc(var(--bf-leading-mark-group-inset) + var(--bf-leading-mark-offset) - (var(--bf-leading-mark-size) * 0.5));
+}
+
+:where(.bf-theme) :where(.bf-prose ol > li) {
+  padding-inline-start: calc(var(--bf-leading-mark-size) * 0.5);
+}
+
+:where(.bf-theme) :where(.bf-prose ul) {
+  list-style: none;
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
+:where(.bf-theme) :where(.bf-prose ul > li) {
+  padding-inline-start: var(--bf-leading-mark-offset);
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-prose ul > li)::before {
+  background: currentColor;
+  block-size: var(--bf-list-marker-dot-size);
+  border-radius: 50%;
+  content: "";
+  inline-size: var(--bf-list-marker-dot-size);
+  inset-block-start: calc(var(--bf-tick-box-offset) + ((var(--bf-leading-mark-size) - var(--bf-list-marker-dot-size)) * 0.5));
+  inset-inline-start: calc((var(--bf-leading-mark-size) - var(--bf-list-marker-dot-size)) * 0.5);
+  position: absolute;
 }
 
 :where(.bf-theme) :where(.bf-prose li) {
@@ -784,39 +848,37 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-prose blockquote) {
-  border-inline-start: 1px solid var(--bf-color-rule);
-  color: var(--bf-color-muted);
+  color: var(--bf-color-text-default);
   font-family: var(--bf-body-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
   font-size: var(--bf-body-font-size, 1rem);
   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-bottom: var(--bf-body-margin-bottom, 0.125rem);
-  max-inline-size: calc(var(--bf-measure) + var(--bf-space-4));
+  max-inline-size: var(--bf-measure);
   padding-block-end: 0rem;
   padding-block-start: var(--bf-body-nudge-start, 0.375rem);
-  padding-inline-start: var(--bf-space-3);
 }
 
-:where(.bf-theme) :where(.bf-rule, .bf-prose hr) {
+:where(.bf-theme) :where(hr) {
   background: var(--bf-color-rule);
-  block-size: 1px;
+  block-size: 0.0625rem;
   border: 0;
   inline-size: 100%;
   /* Reserve one half-rem rhythm step after the rule, including its */
   /* thickness, so borderless content does not touch the divider. */
-  margin: 0 0 calc(0.5rem - 1px);
+  margin: 0 0 calc(0.5rem - 0.0625rem);
 }
 
 /* Highlight rules share the same scalable emphasis-bar geometry as active
  * navigation, tabs, notifications, and document-navigation markers. */
-:where(.bf-theme) :where(.bf-rule.is-highlighted, .bf-prose hr.is-highlighted) {
+:where(.bf-theme) :where(hr.is-highlighted) {
   block-size: var(--bf-bar-thickness);
   margin-block-end: calc(0.5rem - var(--bf-bar-thickness));
 }
 
 :where(.bf-theme) :where(.bf-token-row) {
-  border-top: 1px solid var(--bf-color-rule);
+  border-top: 0.0625rem solid var(--bf-color-rule);
   display: grid;
   gap: var(--bf-space-1);
   padding-top: var(--bf-space-2);
@@ -828,7 +890,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) {
-  --bf-border-width: 1px;
+  --bf-border-width: 0.0625rem;
   --bf-bar-thickness: 0.1875rem;
   --bf-radius: 0rem;
   --bf-control-block-padding: 0.5rem;
@@ -846,22 +908,48 @@ html.u-baseline-grid::after {
   /* 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: max(var(--bf-control-box-size-compact), calc(var(--bf-body-nudge-start, 0.375rem) + var(--bf-body-line-height, 1.5rem) + var(--bf-body-nudge-end)));
+  --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: var(--bf-body-nudge-start, 0.375rem);
-  --bf-table-row-content-size: calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-table-row-padding) * 2) + var(--bf-table-row-border-size));
-  --bf-table-row-block-size: calc(var(--bf-table-row-content-size) + mod(calc(var(--bf-baseline) - mod(var(--bf-table-row-content-size), var(--bf-baseline))), var(--bf-baseline)));
-  --bf-table-row-line-height: calc(var(--bf-table-row-block-size) - (var(--bf-table-row-padding) * 2) - var(--bf-table-row-border-size));
-  --bf-switch-row-block-size: calc(var(--bf-body-nudge-start, 0.375rem) + var(--bf-body-line-height, 1.5rem) + var(--bf-body-nudge-end));
-  --bf-switch-track-offset: calc(var(--bf-body-nudge-start, 0.375rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-control-visual-size)) / 2));
-  --bf-tick-row-block-size: max(var(--bf-control-box-size-compact), calc(var(--bf-body-nudge-start, 0.375rem) + var(--bf-body-line-height, 1.5rem) + var(--bf-body-nudge-end)));
-  --bf-tick-box-offset: calc(var(--bf-body-nudge-start, 0.375rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-control-visual-size)) / 2));
-  --bf-tick-label-offset: calc(var(--bf-control-visual-size) + var(--bf-control-inline-padding-field));
-  --bf-radio-dot-size: calc(var(--bf-control-visual-size) * 0.375);
+  --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);
+  --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);
+  --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);
   --bf-app-drawer-width-icon: 2rem;
   --bf-app-drawer-width-small: 15rem;
   --bf-app-drawer-width-small-max: 20rem;
@@ -873,7 +961,9 @@ 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-side-navigation-icon-optical-offset-block: 0.1875rem;
+  --bf-icon-label-optical-offset-block: 0.1875rem;
+  --bf-disclosure-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
+  --bf-side-navigation-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
   --bf-side-navigation-icon-gap: 0.625rem;
   --bf-navigation-bar-min-block-size: calc(var(--bf-baseline) * 6);
   --bf-authoring-accent: #f6b73c;
@@ -886,9 +976,10 @@ html.u-baseline-grid::after {
   --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-top-navigation-link-padding-inline: var(--bf-control-inline-padding-action);
-  --bf-top-navigation-end-slot-inline-size: calc(1rem + var(--bf-control-inline-padding-field));
-  --bf-top-navigation-search-toggle-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --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));
   --bf-top-navigation-link-padding-block: max(var(--bf-body-nudge-start), calc(var(--bf-baseline) * 1.5));
   --bf-top-navigation-search-max-inline-size: 20rem;
   --bf-top-navigation-logo-tag-inline-size: 1.375rem;
@@ -897,18 +988,18 @@ html.u-baseline-grid::after {
   --bf-top-navigation-logo-tag-gap: 0.25rem;
   --bf-top-navigation-logo-icon-bottom-offset: 0.375rem;
   --bf-top-navigation-logo-icon-optical-offset-inline: -0.0125rem;
-  --bf-navigation-brand-title-optical-offset-block: 0rem;
+  --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: calc(var(--bf-baseline) * 2);
-  --bf-leading-icon-gap: calc(var(--bf-baseline) * 1);
-  --bf-leading-icon-offset: calc(var(--bf-body-nudge-start, 0.375rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-leading-icon-size)) / 2));
-  --bf-ui-chip-padding-inline: calc(var(--bf-body-line-height, 1.5rem) * 0.4);
-  --bf-ui-chip-padding-block: max(0rem, calc((var(--bf-control-inline-padding-action) * 0.25) - var(--bf-border-width)));
-  --bf-ui-chip-block-size: calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-ui-chip-padding-block) * 2) + (var(--bf-border-width) * 2));
+  --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);
@@ -971,6 +1062,7 @@ html.u-baseline-grid::after {
   --bf-color-focus: var(--vf-color-focus, #2e96ff);
 
   --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");
@@ -995,11 +1087,9 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme.bf-surface-ubuntu-engine-smoke) {
-  --bf-control-baseline-reserve: 0rem;
   --bf-input-block-padding: 0.41rem;
   --bf-button-block-padding: 0.41rem;
-  --bf-table-row-padding: 0.41rem;
-  --bf-border-width: 1px;
+  --bf-border-width: 0.0625rem;
   --bf-bar-thickness: 0.1875rem;
   --bf-radius: 0rem;
   --bf-control-block-padding: 0.5rem;
@@ -1018,7 +1108,6 @@ html.u-baseline-grid::after {
 }
 
 
-:where(.bf-theme.is-dark),
 :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)));
@@ -1068,6 +1157,7 @@ html.u-baseline-grid::after {
   --bf-color-focus: var(--vf-color-focus, #99ccff);
 
   --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");
@@ -1161,6 +1251,10 @@ html.u-baseline-grid::after {
   grid-template-columns: minmax(0, 1fr);
 }
 
+:where(.bf-theme) :where(.bf-field.is-range.is-stacked) > :where(.bf-control, .bf-form-help) {
+  grid-column: 1;
+}
+
 :where(.bf-theme) :where(.bf-field.is-range.is-stacked) > :where(.bf-control) {
   min-inline-size: 0;
 }
@@ -1178,7 +1272,7 @@ 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-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   padding-block-start: var(--bf-panel-padding-block);
 }
 
@@ -1205,13 +1299,36 @@ html.u-baseline-grid::after {
   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)));
-  padding-inline: var(--bf-control-inline-padding-field);
+  padding-inline: var(--bf-component-inline-inset-field);
 }
 
-:where(.bf-theme) :where(input[type='color'].bf-color-input) {
+:where(.bf-theme) :where(.bf-color-control) {
+  display: grid;
+  grid-template-areas: "color-control";
   inline-size: 4rem;
-  min-block-size: var(--bf-control-box-size);
-  padding: calc(var(--bf-baseline) * 0.5);
+}
+
+/* Native color inputs do not expose a body-text line box. This invisible
+   metric strut gives their wrapper the same natural padding/border/margin
+   construction as every textual control, including under browser zoom. */
+:where(.bf-theme) :where(.bf-color-control)::before {
+  border-block: var(--bf-border-width) solid transparent;
+  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);
+  visibility: hidden;
+}
+
+:where(.bf-theme) :where(.bf-color-control) > :where(input[type='color'].bf-color-input) {
+  align-self: stretch;
+  block-size: auto;
+  grid-area: color-control;
+  inline-size: 100%;
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  min-block-size: 0;
+  padding: var(--bf-border-width);
 }
 
 :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):hover {
@@ -1224,8 +1341,8 @@ html.u-baseline-grid::after {
 
 :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):focus-visible {
   background-color: var(--bf-color-background-active);
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :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):disabled {
@@ -1252,13 +1369,12 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1.5rem);
   background: transparent;
   border: 0 solid transparent;
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
-  border-top: var(--bf-border-width) 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)));
   max-inline-size: 100%;
   min-inline-size: 0;
-  padding-block: max(0rem, calc(var(--bf-input-block-padding) - var(--bf-border-width)));
+  padding-block: 0;
   padding-inline: 0;
   width: 100%;
 }
@@ -1276,9 +1392,9 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   margin-inline-end: var(--bf-field-gap);
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: max(0rem, calc(var(--bf-control-block-padding-compact) - var(--bf-border-width)));
-  padding-inline: var(--bf-control-inline-padding-action);
+  min-block-size: 0;
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-control-inline-padding-action-bordered);
 }
 
 :where(.bf-theme) :where(input[type='file'])::file-selector-button:hover {
@@ -1287,16 +1403,31 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(select) {
   background-image: var(--bf-ui-icon-chevron-down);
-  background-position: right var(--bf-control-inline-padding-field) center;
+  background-position: right var(--bf-component-inline-inset-field) center;
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
-  padding-inline-end: calc(var(--bf-control-inline-padding-field) * 2.5);
+  overflow: hidden;
+  padding-inline-end: calc(var(--bf-component-inline-inset-field) * 2.5);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 :where(.bf-theme) :where(input[type='number'], .bf-slider-input) {
   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. */
+: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);
+}
+
 :where(.bf-theme) :where(.bf-slider-input) {
   flex: 0 1 5rem;
   inline-size: min(100%, 5rem);
@@ -1308,12 +1439,14 @@ html.u-baseline-grid::after {
 
 :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;
-  min-block-size: var(--bf-tick-row-block-size);
+  padding-inline-start: var(--bf-leading-mark-group-inset);
   position: relative;
 }
 
@@ -1334,12 +1467,11 @@ 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-default);
+  border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin-bottom: 0;
-  min-block-size: var(--bf-tick-row-block-size);
-  padding-block-end: var(--bf-body-nudge-end);
-  padding-block-start: var(--bf-body-nudge-start, 0.375rem);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
   padding-inline-start: var(--bf-tick-label-offset);
   position: relative;
 }
@@ -1370,7 +1502,7 @@ html.u-baseline-grid::after {
   border-left: calc(var(--bf-border-width) * 2) solid var(--bf-color-background-default);
   inline-size: calc(var(--bf-control-visual-size) * 0.6);
   inset-inline-start: calc(var(--bf-control-visual-size) * 0.2);
-  inset-block-start: calc(var(--bf-tick-box-offset) + (var(--bf-control-visual-size) * 0.18));
+  inset-block-start: calc(var(--bf-tick-box-offset) + (var(--bf-control-visual-size) * 0.18) + (var(--bf-border-width) * 2));
   opacity: 0;
   transform: rotate(-45deg);
 }
@@ -1408,20 +1540,19 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-checkbox-input:focus-visible + .bf-checkbox-label)::before {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-radio-input:focus-visible + .bf-radio-label)::before {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-switch) {
   align-items: flex-start;
   display: inline-flex;
   gap: var(--bf-field-gap);
-  min-block-size: var(--bf-switch-row-block-size);
   position: relative;
 }
 
@@ -1470,8 +1601,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-switch-input:focus-visible + .bf-switch-slider) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-switch-input:disabled + .bf-switch-slider) {
@@ -1485,11 +1616,11 @@ 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-default);
+  border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: inline-block;
-  margin: 0 0 var(--bf-body-margin-bottom);
-  padding-block-end: 0;
-  padding-block-start: var(--bf-body-nudge-start, 0.375rem);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-validation-message) {
@@ -1498,11 +1629,12 @@ 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);
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-muted);
-  margin: 0 0 var(--bf-body-margin-bottom);
-  padding-block-end: 0;
-  padding-block-start: var(--bf-body-nudge-start, 0.375rem);
-  padding-inline-start: calc(var(--bf-control-visual-size) + var(--bf-field-gap));
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin-inline-start: var(--bf-leading-mark-group-inset);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
 
@@ -1621,6 +1753,15 @@ html.u-baseline-grid::after {
   padding: 0;
 }
 
+/* A composite slider's numeric field owns the shared occupied row. Stretching
+   the track within that real sibling height avoids a second nominal-height
+   calculation that can diverge when rem borders are rasterised under zoom. */
+:where(.bf-theme) :where(.bf-slider:not(.is-stacked)):not(:where(.bf-field.is-range.is-stacked) :where(.bf-slider)) > :where(input[type='range']) {
+  align-self: stretch;
+  block-size: auto;
+  margin-block: 0;
+}
+
 :where(.bf-theme) :where(input[type='range']):focus:not(:focus-visible) {
   outline: none;
 }
@@ -1637,7 +1778,7 @@ html.u-baseline-grid::after {
   border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
   block-size: var(--bf-control-visual-size);
   border-radius: 50%;
-  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 0.0625rem rgba(0, 0, 0, 0.2);
   inline-size: var(--bf-control-visual-size);
   margin-top: calc((var(--bf-slider-track-size) - var(--bf-control-visual-size)) / 2);
 }
@@ -1663,7 +1804,7 @@ html.u-baseline-grid::after {
   border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
   block-size: var(--bf-control-visual-size);
   border-radius: 50%;
-  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 0.0625rem rgba(0, 0, 0, 0.2);
   inline-size: var(--bf-control-visual-size);
 }
 
@@ -1762,9 +1903,9 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-block;
-  margin-bottom: 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)));
-  padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
-  padding-inline: var(--bf-control-inline-padding-action);
+  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);
   text-align: center;
   text-decoration: none;
 }
@@ -1782,6 +1923,13 @@ html.u-baseline-grid::after {
   background-color: var(--bf-color-background-hover);
 }
 
+/* Anchor buttons are controls, not prose links. Qualifying the element and
+ * its interaction states prevents the generic anchor underline from leaking
+ * through while leaving the explicit is-link variant unchanged. */
+:where(.bf-theme) :where(a.bf-button:not(.is-link):is(:hover, :active)) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-button:not(.is-base):is(:active, [aria-pressed='true'])) {
   background-color: var(--bf-color-background-active);
 }
@@ -1791,8 +1939,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 /* ------------------------------------------------------------------ */
@@ -1864,7 +2012,7 @@ html.u-baseline-grid::after {
   background-color: transparent;
   color: var(--bf-color-link-default);
   text-decoration: underline;
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: 0.0625rem;
   text-underline-offset: 0.075em;
 }
 
@@ -1891,6 +2039,19 @@ html.u-baseline-grid::after {
   justify-content: center;
 }
 
+/* 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))) {
+  column-gap: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label)))::before {
+  block-size: var(--bf-body-line-height);
+  content: "";
+  inline-size: 0;
+}
+
 :where(.bf-theme) :where(.bf-button-label) {
   min-inline-size: 0;
 }
@@ -2051,7 +2212,7 @@ html.u-baseline-grid::after {
   border-inline-start: var(--bf-bar-thickness) solid var(--bf-notice-border);
   color: var(--bf-color-text-default);
   display: flow-root;
-  margin-block: 0 var(--bf-section-space-shallow);
+  margin: 0;
   max-inline-size: 100%;
   padding-block: var(--bf-space-2);
   padding-inline: var(--bf-space-2);
@@ -2097,16 +2258,15 @@ html.u-baseline-grid::after {
 /* ------------------------------------------------------------------ */
 /* Static content ports — Vanilla data spotlight and divided section. */
 /* Their children retain role-owned rhythm; these layout */
-/* wrappers add only structural columns, rules, and explicit section ends. */
+/* wrappers add only structural columns, rules, and internal gaps. */
 /* ------------------------------------------------------------------ */
 
 /* Data spotlight: Vanilla's equal-height wrap becomes an intrinsic grid.
    Each item begins with a public highlighted rule using the shared emphasis
-   thickness. Item padding remains item-owned, so compositions never erase the
-   shallow inter-row rhythm when the pattern narrows. */
+   thickness. The items container owns every inter-row gap. */
 :where(.bf-theme) :where(.bf-data-spotlight) {
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
@@ -2119,15 +2279,13 @@ html.u-baseline-grid::after {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
+  row-gap: var(--bf-section-space-shallow);
 }
 
 :where(.bf-theme) :where(.bf-data-spotlight-item) {
   min-inline-size: 0;
   overflow-wrap: anywhere;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-item:not(:last-child)) {
-  padding-block-end: var(--bf-section-space-shallow);
+  padding: 0;
 }
 
 :where(.bf-theme) :where(.bf-data-spotlight-stat) {
@@ -2180,6 +2338,14 @@ html.u-baseline-grid::after {
 @container (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-data-spotlight-items) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    row-gap: var(--bf-space-1);
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-items)::after {
+    block-size: calc(var(--bf-section-space-shallow) - (var(--bf-space-1) * 2));
+    content: "";
+    grid-column: 1 / -1;
+    grid-row: 6;
   }
 
   :where(.bf-theme) :where(.bf-data-spotlight-header, .bf-data-spotlight-item) {
@@ -2188,10 +2354,6 @@ html.u-baseline-grid::after {
     grid-template-rows: subgrid;
   }
 
-  :where(.bf-theme) :where(.bf-data-spotlight-item) {
-    padding-block-end: 0;
-  }
-
   :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-header) {
     block-size: 0;
     overflow: visible;
@@ -2199,7 +2361,13 @@ html.u-baseline-grid::after {
 
   :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
   :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
-    padding-block-end: var(--bf-section-space-shallow);
+    grid-row: span 5;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-two-blocks) :where(.bf-data-spotlight-item:nth-of-type(2)),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:nth-of-type(n + 2)),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-of-type(n + 3)) {
+    grid-row: 7 / span 5;
   }
 }
 
@@ -2212,15 +2380,18 @@ html.u-baseline-grid::after {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  :where(.bf-theme) :where(.bf-data-spotlight-items)::after {
+    content: none;
+  }
+
   :where(.bf-theme) :where(.bf-data-spotlight.is-two-blocks) :where(.bf-data-spotlight-header) {
     block-size: 0;
     grid-column: span 2;
     overflow: visible;
   }
 
-  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
-  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
-    padding-block-end: 0;
+  :where(.bf-theme) :where(.bf-data-spotlight-item) {
+    grid-row: span 5;
   }
 }
 
@@ -2229,7 +2400,7 @@ html.u-baseline-grid::after {
    headings, copy, and content items keep their own metric-derived rhythm. */
 :where(.bf-theme) :where(.bf-divided-section) {
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
@@ -2248,37 +2419,41 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-divided-section-list) {
-  align-content: start;
-  display: grid;
+  --bf-divided-section-rule-to-content: calc(0.5rem - var(--bf-border-width));
+  --bf-stack-space: 1.5rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
+/* Preserve the pre-0.1.5 list markup; canonical composition also carries
+   bf-stack so the container remains the explicit owner of item spacing. */
+:where(.bf-theme) :where(.bf-divided-section-list:not(.bf-stack)) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
+}
+
 :where(.bf-theme) :where(.bf-divided-section-item) {
   align-content: start;
   display: grid;
+  margin: 0;
   min-inline-size: 0;
   overflow-wrap: anywhere;
+  padding: 0;
+  position: relative;
 }
 
-:where(.bf-theme) :where(.bf-divided-section-item:not(:last-child)) {
-  padding-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-divided-section-item + .bf-divided-section-item) {
-  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  padding-block-start: calc(var(--bf-section-space-shallow) - var(--bf-border-width));
-}
-
-@container (width >= 38.75rem) {
-  :where(.bf-theme) :where(.bf-divided-section.is-split-medium) :where(.bf-divided-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+:where(.bf-theme) :where(.bf-divided-section-item + .bf-divided-section-item)::before {
+  background: var(--bf-color-border-low-contrast);
+  block-size: var(--bf-border-width);
+  content: "";
+  inset-block-start: calc((var(--bf-divided-section-rule-to-content) + var(--bf-border-width)) * -1);
+  inset-inline: 0;
+  position: absolute;
 }
 
-@container (width >= 64.75rem) {
+@container (width >= 45rem) {
   :where(.bf-theme) :where(.bf-divided-section) :where(.bf-divided-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2363,12 +2538,13 @@ html.u-baseline-grid::after {
   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 var(--bf-space-3);
+  margin-block: 0;
   max-inline-size: 100%;
   min-inline-size: 0;
   overflow-wrap: anywhere;
-  padding-block: calc(var(--bf-space-1) - var(--bf-border-width));
-  padding-inline: calc((var(--bf-space-2) * 2) + var(--bf-icon-size-default)) 0;
+  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);
   position: relative;
 }
 
@@ -2391,14 +2567,14 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-notification.is-borderless) {
   border: 0;
   padding-block: 0;
-  padding-inline: calc(var(--bf-space-2) * 2) 0;
+  padding-inline: calc(var(--bf-icon-size-default) + var(--bf-space-1)) 0;
 }
 
 :where(.bf-theme) :where(.bf-notification-icon) {
   background-color: var(--bf-notification-accent);
   background-image: none;
-  inset-block-start: calc(var(--bf-space-1) + ((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start));
-  inset-inline-start: var(--bf-space-2);
+  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));
   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;
@@ -2419,22 +2595,52 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless > .bf-notification-icon) {
-  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start));
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 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));
+}
+
 :where(.bf-theme) :where(.bf-notification-content, .bf-notification-meta) {
   max-inline-size: 100%;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-notification-content) {
-  margin-block-end: calc(var(--bf-space-2) - var(--bf-body-nudge-start));
-  padding-block-start: var(--bf-body-nudge-start);
-  padding-inline-end: var(--bf-space-4);
+  /* 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));
+}
+
+:where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-content) {
+  --bf-stack-space: 0rem;
+  margin-block-start: 0;
+}
+
+/* Metadata-bearing notifications use a full baseline between title and copy,
+   and pair it with the full end inset. This keeps both the metadata boundary
+   and the complete shell on-grid; simpler messages retain compact rhythm. */
+:where(.bf-theme) :where(.bf-notification:has(> .bf-notification-meta)) {
+  padding-block-end: calc(var(--bf-space-1) - var(--bf-border-width));
+}
+
+:where(.bf-theme) :where(.bf-notification.is-inline) {
+  padding-block-end: calc(var(--bf-space-1) - var(--bf-border-width));
+}
+
+/* Return the cancelled H6/body metric edges to the shell boundary. The
+ * Documentation tier deliberately gives those roles different metrics, so
+ * deriving this inset keeps every bordered notification on-grid without
+ * reopening the visible title/copy gap. Keep this after the shell variants so
+ * the metric relationship owns their final compensation. */
+:where(.bf-theme) :where(.bf-notification:has(> .bf-notification-content.is-metric-flush):not(.is-borderless)) {
+  padding-block-end: calc(var(--bf-space-1) - var(--bf-border-width) + var(--bf-baseline) - var(--bf-h6-nudge-start) - var(--bf-body-margin-bottom));
 }
 
-:where(.bf-theme) :where(.bf-notification-title, .bf-notification-message, .bf-notification-timestamp) {
+:where(.bf-theme) :where(.bf-notification-message, .bf-notification-timestamp) {
   font-family: var(--bf-body-font-family);
   font-size: var(--bf-body-font-size);
   font-style: var(--bf-body-font-style);
@@ -2442,20 +2648,11 @@ html.u-baseline-grid::after {
   max-inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-notification-title) {
-  font-weight: 600;
-  margin-block: 0;
-  padding-block: 0;
-}
-
 :where(.bf-theme) :where(.bf-notification-message) {
   font-weight: var(--bf-body-font-weight);
-  margin-block: 0;
-  padding-block: 0;
-}
-
-:where(.bf-theme) :where(.bf-notification.is-inline .bf-notification-title, .bf-notification.is-inline .bf-notification-message) {
-  display: inline;
+  margin-block: 0 var(--bf-body-margin-bottom);
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
 }
 
 :where(.bf-theme) :where(.bf-notification-close) {
@@ -2465,8 +2662,8 @@ html.u-baseline-grid::after {
   margin-block-end: 0;
   padding: 0;
   position: absolute;
-  inset-block-start: var(--bf-space-1);
-  inset-inline-end: var(--bf-space-1);
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-close) {
@@ -2481,7 +2678,7 @@ html.u-baseline-grid::after {
   flex-wrap: wrap;
   gap: var(--bf-space-1) var(--bf-space-2);
   justify-content: space-between;
-  margin-block-end: var(--bf-space-1);
+  margin-block-end: 0;
   padding-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
   padding-inline-end: var(--bf-space-2);
 }
@@ -2494,7 +2691,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-notification-timestamp) {
   color: var(--bf-color-text-muted);
   font-weight: var(--bf-body-font-weight);
-  margin-block: 0 calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  margin-block: 0 var(--bf-body-margin-bottom);
   padding-block: var(--bf-body-nudge-start) 0;
 }
 
@@ -2509,7 +2706,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-notification-actions > .bf-button.is-link) {
   flex: 0 0 auto;
-  margin-block-end: calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  margin-block-end: var(--bf-body-margin-bottom);
   padding-block: var(--bf-body-nudge-start) 0;
 }
 
@@ -2529,10 +2726,10 @@ html.u-baseline-grid::after {
   cursor: inherit;
   display: inline-block;
   font: inherit;
-  margin: -2px calc(var(--bf-space-half) * -1);
+  margin: -0.125rem calc(var(--bf-space-half) * -1);
   max-inline-size: 100%;
   overflow: hidden;
-  padding: 2px var(--bf-space-half);
+  padding: 0.125rem var(--bf-space-half);
   text-align: inherit;
   text-decoration: inherit;
   text-overflow: inherit;
@@ -2543,7 +2740,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort]:hover, .bf-table-sort-button:focus-visible) {
   color: var(--bf-color-link-default);
   text-decoration: underline;
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: 0.0625rem;
   text-underline-offset: 0.075em;
 }
 
@@ -2552,11 +2749,11 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-table-sort-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
-:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort])::after {
   background-image: var(--bf-ui-icon-chevron-down);
   background-position: center;
   background-repeat: no-repeat;
@@ -2566,9 +2763,14 @@ html.u-baseline-grid::after {
   display: inline-block;
   inline-size: var(--bf-icon-size-default);
   margin-inline-start: var(--bf-space-half);
+  opacity: 0;
   vertical-align: calc((1cap - var(--bf-icon-size-default)) / 2);
 }
 
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
+  opacity: 1;
+}
+
 :where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'])::after {
   transform: rotate(180deg);
 }
@@ -2605,9 +2807,9 @@ html.u-baseline-grid::after {
   }
 
   :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > thead) {
-    block-size: 1px;
+    block-size: 0.0625rem;
     clip-path: inset(50%);
-    inline-size: 1px;
+    inline-size: 0.0625rem;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
@@ -2678,7 +2880,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-logo-section) {
   container-name: bf-logo-section;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space-shallow);
+  margin: 0;
   min-inline-size: 0;
 }
 
@@ -2712,8 +2914,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-logo-section-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-logo-section-logo) {
@@ -2740,7 +2942,7 @@ html.u-baseline-grid::after {
   inline-size: 100%;
 }
 
-/* Vanilla's small breakpoint is 620px. The items descendant, rather than the
+/* Vanilla's small breakpoint is 38.75rem. The items descendant, rather than the
    query container itself, responds when its allocated space reaches it. */
 @container bf-logo-section (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-logo-section-items) {
@@ -2764,19 +2966,21 @@ html.u-baseline-grid::after {
 
 /* ------------------------------------------------------------------ */
 /* Media object — semantic media/content slots with a container-owned */
-/* structural collapse only. Content roles retain their own spacing.  */
+/* structural collapse. Content roles retain their metric boxes.      */
 /* ------------------------------------------------------------------ */
 
 :where(.bf-theme) :where(.bf-media-object) {
-  margin-block-end: var(--bf-section-space-shallow);
+  container-name: bf-media-object;
+  container-type: inline-size;
+  margin: 0;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-media-object-layout) {
-  display: grid;
   align-items: start;
-  column-gap: var(--bf-space-2);
-  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   min-inline-size: 0;
 }
 
@@ -2788,6 +2992,10 @@ html.u-baseline-grid::after {
   min-inline-size: 0;
 }
 
+:where(.bf-theme) :where(.bf-media-object-media) {
+  grid-column: 1 / span 2;
+}
+
 :where(.bf-theme) :where(.bf-media-object-media > :where(img, picture, svg, video)) {
   block-size: 100%;
   display: block;
@@ -2802,6 +3010,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-media-object-content) {
+  grid-column: 3 / -1;
   min-inline-size: 0;
   overflow-wrap: anywhere;
 }
@@ -2841,8 +3050,12 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-media-object-meta-list) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   list-style: none;
-  margin: var(--bf-space-1) 0 0;
+  margin: 0;
   padding: 0;
 }
 
@@ -2855,22 +3068,22 @@ html.u-baseline-grid::after {
   overflow-wrap: anywhere;
 }
 
-:where(.bf-theme) :where(.bf-media-object-meta + .bf-media-object-meta) {
-  margin-block-start: var(--bf-space-1);
-}
-
 :where(.bf-theme) :where(.bf-media-object-meta .bf-icon) {
   margin-block-start: var(--bf-body-nudge-start);
 }
 
-:where(.bf-theme) :where(.bf-media-object.is-media-end) :where(.bf-media-object-content) {
-  grid-column: 1;
-  grid-row: 1;
-}
+@container bf-media-object (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-media-object-layout) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
 
-:where(.bf-theme) :where(.bf-media-object.is-media-end) :where(.bf-media-object-media) {
-  grid-column: 2;
-  grid-row: 1;
+  :where(.bf-theme) :where(.bf-media-object-media) {
+    grid-column: 1 / span 2;
+  }
+
+  :where(.bf-theme) :where(.bf-media-object-content) {
+    grid-column: 3 / -1;
+  }
 }
 
 
@@ -2881,20 +3094,13 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-linked-logo-section) {
   container-name: bf-linked-logo-section;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-linked-logo-section.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section.is-deep) {
-  margin-block-end: var(--bf-section-space-deep);
-}
-
 :where(.bf-theme) :where(.bf-linked-logo-section-layout) {
   display: grid;
+  gap: var(--bf-section-space-shallow);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
@@ -2927,7 +3133,7 @@ html.u-baseline-grid::after {
   max-inline-size: none;
 }
 
-:where(.bf-theme) :where(.bf-linked-logo-section-card) {
+:where(.bf-theme) :where(a.bf-linked-logo-section-card) {
   align-content: start;
   align-items: stretch;
   color: inherit;
@@ -2939,7 +3145,7 @@ html.u-baseline-grid::after {
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
+:where(.bf-theme) :where(a.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
   text-decoration: underline;
 }
 
@@ -2958,7 +3164,7 @@ html.u-baseline-grid::after {
    of baselines tall. Keep the visual ratio exact and put only the residual
    rhythm compensation after the mark; the copy keeps its own semantic
    spacing and the occupied card still lands on the tier grid. */
-@supports (margin-block-end: round(up, 1px, 1px)) {
+@supports (margin-block-end: round(up, 0.0625rem, 0.0625rem)) {
   :where(.bf-theme) :where(.bf-linked-logo-section-mark) {
     margin-block-end: calc(
       round(up, calc(100cqi * 9 / 16), var(--bf-baseline))
@@ -2990,21 +3196,25 @@ html.u-baseline-grid::after {
   overflow-wrap: anywhere;
 }
 
-/* Vanilla's linked-logo block moves from one to two cards per row at the
-   4-column medium grid.  The section itself does not split until the 8-column
-   large grid: its macro uses large-only grid columns for the 50/50 and 25/75
-   rails.  The root establishes the query context; only descendants change. */
+/* The linked-logo block moves from one to two cards per row at the 4-column
+   medium grid. The balanced 50/50 section split uses the shared readable
+   threshold; the 25/75 content rail and four-card density retain their
+   separately measured wide threshold. The root establishes the query context;
+   only descendants change. */
 @container bf-linked-logo-section (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@container bf-linked-logo-section (width >= 64.75rem) {
+@container bf-linked-logo-section (width >= 45rem) {
   :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+@container bf-linked-logo-section (width >= 64.75rem) {
 
   :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
@@ -3107,35 +3317,27 @@ html.u-baseline-grid::after {
 }
 
 /* A section title may be the route action without looking like body copy. */
-:where(.bf-theme) :where(.bf-basic-section-title-link, .bf-basic-section-title-link:visited) {
+:where(.bf-theme) :where(a.bf-basic-section-title-link, a.bf-basic-section-title-link:visited) {
   color: var(--bf-color-link-default);
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-basic-section-title-link:hover) {
+:where(.bf-theme) :where(a.bf-basic-section-title-link:hover) {
   text-decoration: underline;
   text-decoration-thickness: var(--bf-border-width);
   text-underline-offset: 0.12em;
 }
 
-/* Vanilla splits at medium only on request, otherwise at its large breakpoint.
-   The layout descendant reacts to the root container; the query never tries to
+/* A balanced section switches at the shared readable 50/50 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 >= 38.75rem) {
-  :where(.bf-theme) :where(.bf-basic-section.is-split-medium) :where(.bf-basic-section-layout) {
+@container bf-basic-section (width >= 45rem) {
+  :where(.bf-theme) :where(.bf-basic-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@container bf-basic-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-basic-section:not(.is-split-medium)) :where(.bf-basic-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-}
-
 /* CTA section: Vanilla's 25/75 variant is an offset content rail. The full
    variant stays naturally full-width. Typography and action presentation are
    supplied by real heading elements and bf-cta-block. */
@@ -3149,19 +3351,23 @@ html.u-baseline-grid::after {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
-  padding-block: calc(var(--bf-section-space-deep) / 2);
 }
 
 :where(.bf-theme) :where(.bf-cta-section-content) {
+  --bf-stack-space: var(--bf-section-space-shallow);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   min-inline-size: 0;
   overflow-wrap: anywhere;
 }
 
-@container bf-cta-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-cta-section-layout) {
-    padding-block: var(--bf-section-space-deep);
-  }
+:where(.bf-theme) :where(.bf-cta-section-copy) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
 
+@container bf-cta-section (width >= 64.75rem) {
   :where(.bf-theme) :where(.bf-cta-section.is-offset) :where(.bf-cta-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
@@ -3229,15 +3435,15 @@ html.u-baseline-grid::after {
 /* semantic gaps and every text child keeps metric compensation.        */
 /* ------------------------------------------------------------------ */
 
-/* Hero: its deliberately asymmetric boundary mirrors the current Vanilla
-   section--hero: a compact arrival space, then the normal section exit. The
-   entry rule replaces one pixel of padding so it never changes the rhythm. */
+/* Hero: the compact arrival space belongs inside its entry rule. The outer
+   stack owns the section exit, and the rule replaces one pixel of padding so
+   it never changes the rhythm. */
 :where(.bf-theme) :where(.bf-hero) {
   border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
   container-name: bf-hero;
   container-type: inline-size;
   min-inline-size: 0;
-  padding-block-end: calc(var(--bf-section-space) / 2);
+  padding-block-end: 0;
   padding-block-start: calc(var(--bf-space-2) - var(--bf-border-width));
 }
 
@@ -3250,6 +3456,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-hero-layout) {
   display: grid;
+  gap: var(--bf-section-space-shallow);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
@@ -3259,9 +3466,9 @@ html.u-baseline-grid::after {
   overflow-wrap: anywhere;
 }
 
-/* The normal hero keeps title, supporting heading, chip, prose and CTA in a
-   semantic copy stack. Hero titles are h1 slots and supporting titles are h2
-   slots. */
+/* Legacy copy slots remain valid for signpost variants. The default arrival
+   composition separates a title area from its supporting content area, and
+   the demo composes each area with the public stack density modifiers. */
 :where(.bf-theme) :where(.bf-hero-copy) {
   align-content: start;
   display: grid;
@@ -3288,7 +3495,7 @@ html.u-baseline-grid::after {
    allocated a fluid grid track. Snap only the media block to the active tier
    baseline so the following semantic text remains on-grid; its inline track
    and the surrounding Vanilla proportions remain unchanged. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-hero-media > .bf-aspect, .bf-hero-signpost > :where(img, picture, video, canvas, svg)) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -3311,14 +3518,10 @@ html.u-baseline-grid::after {
   inline-size: 100%;
 }
 
-/* Vanilla's desktop hero boundary is 1036px. The layout descendant responds
-   to the root container so embedding it in a narrower rail still collapses
-   correctly. */
-/* The section boundary itself follows Vanilla's page-level desktop switch;
-   the composition below continues to react to the allocated container. */
+/* The section boundary follows the page-level desktop switch, while the
+   two-column composition uses its measured intrinsic allocation below. */
 @media (width >= 64.75rem) {
   :where(.bf-theme) :where(.bf-hero) {
-    padding-block-end: var(--bf-section-space);
     padding-block-start: calc(var(--bf-space-3) - var(--bf-border-width));
   }
 
@@ -3327,7 +3530,7 @@ html.u-baseline-grid::after {
   }
 }
 
-@container bf-hero (width >= 64.75rem) {
+@container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3347,9 +3550,10 @@ html.u-baseline-grid::after {
   }
 }
 
-/* Vanilla can intentionally split the three proportioned layouts at its
-   medium threshold. The modifier changes only structural tracks. */
-@container bf-hero (width >= 38.75rem) {
+/* The named variants retain their proportion but share the readable split
+   threshold with the default hero. The modifier changes only structural
+   tracks; it does not introduce an earlier cramped layout. */
+@container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero.is-split-medium) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3369,14 +3573,10 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-quote-wrapper) {
   container-name: bf-quote-wrapper;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-quote-wrapper.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
-}
-
 :where(.bf-theme) :where(.bf-quote-wrapper-header, .bf-quote-wrapper-layout, .bf-quote-wrapper-signpost, .bf-quote-wrapper-content, .bf-quote-wrapper-citation, .bf-quote-wrapper-media) {
   min-inline-size: 0;
   overflow-wrap: anywhere;
@@ -3423,7 +3623,7 @@ html.u-baseline-grid::after {
 /* The quote rail can also be a fractional grid track. Keep its media from
    introducing a sub-baseline row while leaving quotation and citation rhythm
    entirely baseline-compensated while its stack owns semantic gaps. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-quote-wrapper-signpost > :where(img, picture, svg), .bf-quote-wrapper-media > .bf-aspect) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -3462,8 +3662,47 @@ html.u-baseline-grid::after {
 }
 
 @container bf-quote-wrapper (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-quote-wrapper-header) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-header) > :first-child {
+    grid-column: 1 / span 6;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-header-link) {
+    grid-column: 7 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-layout) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-signpost) {
+    grid-column: 1 / span 2;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-content, .bf-quote-wrapper-content:only-child) {
+    display: grid;
+    grid-column: 3 / -1;
+    grid-template-columns: subgrid;
+  }
+
   :where(.bf-theme) :where(.bf-quote-wrapper-quote-row) {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-prose) {
+    grid-column: 1 / span 4;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-citation) {
+    grid-column: 5 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-content) > :where(.bf-cta-block, .bf-quote-wrapper-media) {
+    grid-column: 1 / -1;
   }
 }
 
@@ -3476,19 +3715,13 @@ html.u-baseline-grid::after {
   container-name: bf-rich-list;
   container-type: inline-size;
   min-inline-size: 0;
-  padding-block-end: calc(var(--bf-section-space) / 2);
-}
-
-:where(.bf-theme) :where(.bf-rich-list.is-shallow) {
-  padding-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-rich-list.is-deep) {
-  padding-block-end: calc(var(--bf-section-space-deep) / 2);
 }
 
 :where(.bf-theme) :where(.bf-rich-list-layout) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
   display: grid;
+  gap: var(--bf-stack-space);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
@@ -3503,14 +3736,11 @@ html.u-baseline-grid::after {
   overflow-wrap: anywhere;
 }
 
-@media (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-rich-list:not(.is-shallow)) {
-    padding-block-end: var(--bf-section-space);
-  }
-
-  :where(.bf-theme) :where(.bf-rich-list.is-deep) {
-    padding-block-end: var(--bf-section-space-deep);
-  }
+:where(.bf-theme) :where(.bf-rich-list-support, .bf-rich-list-content) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
 }
 
 /* ------------------------------------------------------------------ */
@@ -3537,7 +3767,7 @@ html.u-baseline-grid::after {
 /* A full-width ratio inside a fluid Sites rail otherwise leaves the next
    heading on a fractional pixel. The visual alone absorbs the trailing
    compensation; semantic children retain their own margins unchanged. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-rich-list-visual > .bf-aspect) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -3576,8 +3806,12 @@ html.u-baseline-grid::after {
 
 /* Prefixes are logical here even though the shared list predates BF's
    logical-property rule. This keeps ticks, bullets and numbers RTL-safe. */
+:where(.bf-theme) :where(.bf-rich-list-list:has(> .bf-list-item:is(.is-ticked, .is-crossed)), .bf-rich-list-list.is-bulleted, ol.bf-rich-list-list) {
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
 :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:is(.is-ticked, .is-crossed) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
 }
 
 :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:is(.is-ticked, .is-crossed)::before {
@@ -3587,7 +3821,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-rich-list-list.is-bulleted) > :where(.bf-list-item) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
 }
 
 :where(.bf-theme) :where(.bf-rich-list-list.is-bulleted) > :where(.bf-list-item)::before {
@@ -3606,7 +3840,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(ol.bf-rich-list-list) > :where(.bf-list-item) {
   counter-increment: bf-rich-horizontal-counter;
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
 }
 
 :where(.bf-theme) :where(ol.bf-rich-list-list) > :where(.bf-list-item)::before {
@@ -3653,7 +3887,7 @@ html.u-baseline-grid::after {
   }
 }
 
-@container bf-rich-list (width >= 64.75rem) {
+@container bf-rich-list (width >= 45rem) {
   :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3667,7 +3901,7 @@ html.u-baseline-grid::after {
     grid-column: 2;
   }
 
-  :where(.bf-theme) :where(.bf-rich-list.is-horizontal) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-cta) {
+  :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-cta) {
     grid-column: 2;
   }
 }
@@ -3682,7 +3916,6 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-rich-list.is-vertical) :where(.bf-rich-list-media) {
   container-type: inline-size;
-  padding-block-end: var(--bf-section-space-shallow);
 }
 
 :where(.bf-theme) :where(.bf-rich-list.is-vertical.is-flipped) :where(.bf-rich-list-media) {
@@ -3701,7 +3934,7 @@ html.u-baseline-grid::after {
 /* The media object deliberately stretches across fluid 1/2 and 2/3 ratios.
    Snap that resulting block, rather than resetting content spacing, so each
    tier's baseline survives both portrait and landscape allocations. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-rich-list-media-frame) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -3744,11 +3977,7 @@ html.u-baseline-grid::after {
 /* Auto height has no shallow media wrapper in Vanilla. At narrow widths it
    remains a normal 3:2 frame; at the wide split it stretches with the content
    rail, clamped between the equivalent 16:9 and 2:3 heights. */
-:where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) {
-  padding-block-end: 0;
-}
-
-@container bf-rich-list (width >= 64.75rem) {
+@container bf-rich-list (width >= 45rem) {
   :where(.bf-theme) :where(.bf-rich-list.is-vertical) > :where(.bf-rich-list-layout) {
     align-items: stretch;
     column-gap: var(--bf-grid-gap-inline);
@@ -3797,7 +4026,7 @@ html.u-baseline-grid::after {
     min-block-size: 56.25cqi;
   }
 
-  @supports (min-block-size: round(up, 1px, 1px)) {
+  @supports (min-block-size: round(up, 0.0625rem, 0.0625rem)) {
     :where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) :where(.bf-rich-list-media-frame) {
       max-block-size: round(down, 150cqi, var(--bf-baseline));
       min-block-size: round(up, 56.25cqi, var(--bf-baseline));
@@ -3815,6 +4044,7 @@ html.u-baseline-grid::after {
 
 
 :where(.bf-theme) :where(.bf-panel) {
+  --bf-panel-content-padding-inline: var(--bf-component-inline-inset-continuation);
   background: var(--bf-color-background-default);
   color: var(--bf-color-text-default);
   display: flex;
@@ -3837,6 +4067,9 @@ 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. */
 :where(.bf-theme) :where(.bf-panel-header) {
   align-items: start;
   display: flex;
@@ -3845,7 +4078,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-padding-inline);
+  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 /* A navigation brand keeps the Canonical tag attached to the panel's top edge
@@ -3855,17 +4088,13 @@ html.u-baseline-grid::after {
   gap: 0;
   padding-block: 0;
   padding-inline-end: 0;
-  padding-inline-start: var(--bf-panel-padding-inline);
+  padding-inline-start: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 :where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
   inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) :where(.bf-top-navigation-logo-title) {
-  transform: translateY(var(--bf-navigation-brand-title-optical-offset-block));
-}
-
 :where(.bf-theme) :where(.bf-panel-header) > :where(.bf-panel-title) {
   min-inline-size: 0;
 }
@@ -3886,10 +4115,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) * 2));
+  min-block-size: calc(var(--bf-control-box-size-compact) + var(--bf-panel-padding-block));
   padding-block-end: var(--bf-panel-padding-block);
-  padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-block-start: 0;
+  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 :where(.bf-theme) :where(.bf-panel-footer.is-sticky) {
@@ -3951,8 +4180,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-panel-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-panel-content) {
@@ -3960,7 +4189,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-padding-inline);
+  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 :where(.bf-theme) :where(.bf-panel-content.is-flush) {
@@ -3985,7 +4214,7 @@ html.u-baseline-grid::after {
   overflow: auto;
   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-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-card.is-highlighted) {
@@ -4010,7 +4239,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(a.bf-card:hover, a.bf-card.is-highlighted:hover, a.bf-card.is-overlay:hover, a.bf-card.is-muted:hover) {
   border-color: var(--bf-color-focus);
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 :where(.bf-theme) :where(a.bf-card:focus:not(:focus-visible), a.bf-card.is-highlighted:focus:not(:focus-visible), a.bf-card.is-overlay:focus:not(:focus-visible), a.bf-card.is-muted:focus:not(:focus-visible)) {
@@ -4018,8 +4247,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(a.bf-card:focus-visible, a.bf-card.is-highlighted:focus-visible, a.bf-card.is-overlay:focus-visible, a.bf-card.is-muted:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-card.is-preview) {
@@ -4102,7 +4331,7 @@ html.u-baseline-grid::after {
   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));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   text-align: left;
 }
 
@@ -4115,7 +4344,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(button.bf-option-card:hover:not(:disabled)) {
   background: var(--bf-color-background-hover);
   border-color: var(--bf-color-focus);
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 :where(.bf-theme) :where(.bf-option-card.is-active),
@@ -4126,8 +4355,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(button.bf-option-card:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-option-card-label) {
@@ -4175,7 +4404,7 @@ html.u-baseline-grid::after {
 /* Snap the grid-row wrapper after intrinsic image/copy measurement. Because
    the card flexes inside it, peers retain Vanilla's equal-height row while
    the card edge and the following row both land on BF baselines. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-content-card-wrapper) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -4352,7 +4581,7 @@ html.u-baseline-grid::after {
   text-transform: var(--bf-h1-text-transform);
 }
 
-:where(.bf-theme) :where(.bf-content-card-main-link) {
+:where(.bf-theme) :where(a.bf-content-card-main-link) {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   color: inherit;
@@ -4372,7 +4601,7 @@ html.u-baseline-grid::after {
   z-index: 1;
 }
 
-:where(.bf-theme) :where(.bf-content-card-main-link:is(:hover, :focus, :active, :visited)) {
+:where(.bf-theme) :where(a.bf-content-card-main-link:is(:hover, :focus, :active, :visited)) {
   color: inherit;
   text-decoration: none;
 }
@@ -4382,8 +4611,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-content-card:has(.bf-content-card-main-link:focus-visible)) {
-  outline: 3px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.1875rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 /* All nested actions sit above the expanded main-link hit area. This includes
@@ -4459,6 +4688,7 @@ html.u-baseline-grid::after {
   min-inline-size: 0;
   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);
   position: relative;
   scrollbar-width: none;
@@ -4496,11 +4726,11 @@ html.u-baseline-grid::after {
 
 /* Internal geometry responds to the card's allocated width. The card root is
    only the container; the frame/media/body descendants own queried styles. */
-/* Vanilla switches the viewport at 620px/1036px. A four-column card is much
+/* Vanilla switches the viewport at 38.75rem/64.75rem. A four-column card is much
    narrower than that viewport after grid margins and gutters, so its internal
-   horizontal layout uses Vanilla's 460px minimum viable allocation. The
-   eight-column 50/50 split starts at the roughly 960px allocation left by the
-   1036px viewport. This preserves the rendered switch in embedded BF grids. */
+   horizontal layout uses Vanilla's 28.75rem minimum viable allocation. The
+   eight-column 50/50 split starts at the roughly 60rem allocation left by the
+   64.75rem viewport. This preserves the rendered switch in embedded BF grids. */
 @container bf-content-card (width < 28.75rem) {
   :where(.bf-theme) :where(.bf-content-card-frame:not(:has(.bf-content-card-footer))) {
     min-block-size: 0;
@@ -4652,18 +4882,16 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-tabs) {
   display: grid;
+  gap: var(--bf-space-2);
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-tabs-list) {
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
+  box-shadow: inset 0 calc(var(--bf-border-width) * -1) 0 var(--bf-color-border-default);
   display: flex;
   gap: 0;
   list-style: none;
-  /* Tabs keep their occupied block on the grid at the list boundary rather
-     than leaving each link's control compensation between its active rule and
-     the list rule. */
-  margin: 0 0 calc((var(--bf-baseline) * 2) - var(--bf-border-width));
+  margin: 0;
   min-inline-size: 0;
   overflow-x: auto;
   padding: 0;
@@ -4685,16 +4913,16 @@ html.u-baseline-grid::after {
   align-items: center;
   background: transparent;
   border: 0;
-  border-bottom: var(--bf-bar-thickness) solid transparent;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-muted);
   cursor: pointer;
-  display: inline-flex;
+  display: flex;
   gap: calc(var(--bf-baseline) * 0.5);
   justify-content: center;
   margin-bottom: 0;
-  padding-block-end: calc(var(--bf-body-nudge-end) + var(--bf-baseline) - var(--bf-bar-thickness));
-  padding-block-start: var(--bf-body-nudge-start);
-  padding-inline: var(--bf-control-inline-padding-action);
+  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-inline: var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
 
@@ -4703,18 +4931,22 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
 }
 
+:where(.bf-theme) :where(a.bf-tabs-link:hover) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-tabs-link:focus:not(:focus-visible)) {
   outline: none;
 }
 
 :where(.bf-theme) :where(.bf-tabs-link:focus-visible) {
   color: var(--bf-color-text-default);
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-tabs-link.is-active, .bf-tabs-link[aria-selected='true']) {
-  border-bottom-color: var(--bf-color-text-default);
+  box-shadow: inset 0 calc(var(--bf-bar-thickness) * -1) 0 var(--bf-color-text-default);
   color: var(--bf-color-text-default);
 }
 
@@ -4764,10 +4996,10 @@ html.u-baseline-grid::after {
   display: grid;
   gap: calc(var(--bf-baseline) * 0.75);
   grid-template-columns: auto minmax(0, 1fr) auto;
-  margin: 0 0 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)));
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
   min-inline-size: 0;
-  padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
-  padding-inline: var(--bf-control-inline-padding-field);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-field);
 }
 
 :where(.bf-theme) :where(.bf-choice-row:hover) {
@@ -4775,8 +5007,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-choice-row:has(:focus-visible)) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-choice-row input[type='radio']) {
@@ -4823,7 +5055,7 @@ html.u-baseline-grid::after {
   gap: var(--bf-field-gap);
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-inline-options-heading) {
@@ -4897,11 +5129,11 @@ html.u-baseline-grid::after {
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  margin-bottom: 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)));
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
   max-inline-size: 100%;
   overflow: hidden;
-  padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
-  padding-inline: var(--bf-control-inline-padding-action);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-control-inline-padding-action-bordered);
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -4927,8 +5159,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-segmented-control-button:focus-visible, .bf-tab-buttons-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
   z-index: 2;
 }
 
@@ -4962,8 +5194,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);
-  margin: 0;
+  margin: 0 0 var(--bf-body-margin-bottom);
   min-inline-size: 0;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
 }
 
 :where(.bf-theme) :where(.bf-breadcrumbs-item) + :where(.bf-breadcrumbs-item)::before {
@@ -4994,26 +5228,35 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-tab-section) {
   container-name: bf-tab-section;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-tab-section.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
+:where(.bf-theme) :where(.bf-tab-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-tab-section.is-deep) {
-  margin-block-end: var(--bf-section-space-deep);
+:where(.bf-theme) :where(.bf-tab-section-rule) {
+  grid-column: 1 / -1;
 }
 
-:where(.bf-theme) :where(.bf-tab-section-layout) {
+:where(.bf-theme) :where(.bf-tab-section-body) {
+  --bf-stack-space: var(--bf-section-space-shallow);
+  align-content: start;
   display: grid;
+  gap: var(--bf-stack-space);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-tab-section-rule) {
-  grid-column: 1 / -1;
+:where(.bf-theme) :where(.bf-tab-section-copy) {
+  align-content: start;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+  row-gap: var(--bf-space-1);
 }
 
 :where(.bf-theme) :where(.bf-tab-section-header, .bf-tab-section-intro, .bf-tab-section-tabs) {
@@ -5021,51 +5264,50 @@ html.u-baseline-grid::after {
   overflow-wrap: anywhere;
 }
 
-/* Vanilla wraps every tab rail except the unadorned 50/50 special case in a
-   shallow section. This explicit composition padding does not change any
-   child's semantic margins. */
-:where(.bf-theme) :where(.bf-tab-section:not(.is-50-50)) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs),
-:where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-tabs) {
-  padding-block-start: var(--bf-section-space-shallow);
+:where(.bf-theme) :where(.bf-tab-section-tabs) {
+  align-self: start;
 }
 
-@container bf-tab-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) {
+@container bf-tab-section (width >= 45rem) {
+  :where(.bf-theme) :where(.bf-tab-section-body) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
+  :where(.bf-theme) :where(.bf-tab-section-copy) {
     grid-column: 1 / -1;
+    grid-template-columns: subgrid;
   }
 
   /* With supporting copy or actions, Vanilla's heading row is 50/50 for all
      three section layouts. The following tab rail retains its own requested
      full, half or three-quarter span. */
-  :where(.bf-theme) :where(.bf-tab-section-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-header) {
+  :where(.bf-theme) :where(.bf-tab-section-copy:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-header) {
     grid-column: 1 / 3;
   }
 
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-intro) {
+  :where(.bf-theme) :where(.bf-tab-section-copy) > :where(.bf-tab-section-intro) {
     grid-column: 3 / -1;
   }
 
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
+  :where(.bf-theme) :where(.bf-tab-section-body) > :where(.bf-tab-section-tabs) {
     grid-column: 1 / -1;
   }
 
   /* An unadorned 50/50 section lets auto-placement put the heading and tabs
      in the same row. If an intro exists, it occupies that right-hand cell and
      the tabs move to the following row, matching the upstream rendering. */
-  :where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
+  :where(.bf-theme) :where(.bf-tab-section.is-50-50) :where(.bf-tab-section-copy:not(:has(> .bf-tab-section-intro))) {
     grid-column: 1 / 3;
+    grid-row: 1;
   }
 
-  :where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
+  :where(.bf-theme) :where(.bf-tab-section.is-50-50) :where(.bf-tab-section-copy:not(:has(> .bf-tab-section-intro))) + :where(.bf-tab-section-tabs) {
     grid-column: 3 / -1;
+    grid-row: 1;
   }
 
-  :where(.bf-theme) :where(.bf-tab-section.is-25-75) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
+  :where(.bf-theme) :where(.bf-tab-section.is-25-75) :where(.bf-tab-section-body) > :where(.bf-tab-section-tabs) {
     grid-column: 2 / -1;
   }
 }
@@ -5076,11 +5318,11 @@ html.u-baseline-grid::after {
   container-type: inline-size;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  margin-block-end: var(--bf-section-space-shallow);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-article-pagination-link) {
+:where(.bf-theme) :where(a.bf-article-pagination-link) {
   background-color: var(--bf-color-background-default);
   border: var(--bf-border-width) solid transparent;
   box-sizing: border-box;
@@ -5096,8 +5338,9 @@ html.u-baseline-grid::after {
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-article-pagination-link:hover) {
+:where(.bf-theme) :where(a.bf-article-pagination-link:hover) {
   background-color: var(--bf-color-background-hover);
+  text-decoration: none;
 }
 
 :where(.bf-theme) :where(.bf-article-pagination-link:focus:not(:focus-visible)) {
@@ -5105,8 +5348,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-article-pagination-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-article-pagination-link.is-previous) {
@@ -5208,12 +5451,12 @@ html.u-baseline-grid::after {
 
   :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-label),
   :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-title) {
-    block-size: 1px;
+    block-size: 0.0625rem;
     border: 0;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
-    inline-size: 1px;
-    margin: -1px;
+    inline-size: 0.0625rem;
+    margin: -0.0625rem;
     overflow: hidden;
     padding: 0;
     position: absolute;
@@ -5231,6 +5474,10 @@ html.u-baseline-grid::after {
   padding: 0;
 }
 
+:where(.bf-theme) :where(.bf-list:has(> .bf-list-item:is(.is-ticked, .is-crossed)), ol.bf-list.is-divided) {
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
 :where(.bf-theme) :where(.bf-list-item) {
   font-family: var(--bf-body-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
   font-size: var(--bf-body-font-size, 1rem);
@@ -5246,8 +5493,10 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item) {
-  box-shadow: inset 0 1px 0 var(--bf-color-border-low-contrast);
-  padding-block-end: var(--bf-baseline);
+  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);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item:first-child) {
@@ -5255,7 +5504,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
 
@@ -5280,10 +5529,6 @@ html.u-baseline-grid::after {
   background-image: var(--bf-ui-icon-error-grey);
 }
 
-:where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed)::before {
-  top: calc(var(--bf-leading-icon-offset) + (var(--bf-baseline) * 0.5));
-}
-
 :where(.bf-theme) :where(ol.bf-list.is-divided) {
   counter-reset: bf-list-counter;
 }
@@ -5365,11 +5610,11 @@ html.u-baseline-grid::after {
   background: var(--bf-color-background-alt);
   color: var(--bf-color-link-default);
   display: block;
-  left: -999px;
+  left: -62.4375rem;
   max-inline-size: calc(100vw - var(--bf-baseline));
   position: absolute;
   text-decoration: none;
-  top: -999px;
+  top: -62.4375rem;
 }
 
 :where(.bf-theme) :where(.bf-skip-link:hover) {
@@ -5378,7 +5623,7 @@ 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);
-  outline: 2px solid var(--bf-color-focus);
+  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);
@@ -5429,15 +5674,16 @@ html.u-baseline-grid::after {
   line-height: var(--bf-table-row-line-height);
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-table-row-padding);
-  padding-inline: calc(var(--bf-baseline) * 0.75);
+  padding-block-end: var(--bf-table-row-padding-block-end);
+  padding-block-start: var(--bf-table-row-padding-block-start);
+  padding-inline: var(--bf-component-inline-inset-field);
   text-align: left;
   text-overflow: ellipsis;
   vertical-align: top;
 }
 
 :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) {
-  padding-inline-start: calc((var(--bf-baseline) * 0.75) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: calc(var(--bf-component-inline-inset-field) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
 }
 
 :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) > :where(.bf-icon:first-child) {
@@ -5465,10 +5711,6 @@ html.u-baseline-grid::after {
   border-block-end-color: var(--bf-color-border-low-contrast);
 }
 
-:where(.bf-theme) :where(tbody tr:has(.bf-status-label) > td) {
-  padding-block: calc((var(--bf-baseline) - var(--bf-table-row-border-size)) / 2);
-}
-
 :where(.bf-theme) :where(tbody tr:hover td) {
   background: color-mix(in srgb, var(--bf-color-background-hover) 68%, transparent);
 }
@@ -5489,21 +5731,23 @@ html.u-baseline-grid::after {
   align-items: baseline;
   background-color: var(--bf-ui-chip-background);
   border: var(--bf-border-width) solid var(--bf-ui-chip-border);
-  border-radius: 1rem;
+  border-radius: var(--bf-ui-chip-radius);
   color: var(--bf-color-text-default);
   display: inline-flex;
   gap: 0;
   inline-size: fit-content;
   justify-self: start;
-  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-field-gap) 0;
+  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-single-line-row-margin-block-end) 0;
   max-inline-size: 100%;
-  min-block-size: var(--bf-ui-chip-block-size);
-  padding-block: var(--bf-ui-chip-padding-block);
-  padding-inline: var(--bf-ui-chip-padding-inline);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: max(0rem, calc(var(--bf-ui-chip-padding-inline) - var(--bf-border-width)));
   position: relative;
   text-decoration: none;
   user-select: none;
-  vertical-align: calc(var(--bf-border-width) - var(--bf-body-nudge-start, 0.375rem));
+  /* Inline-flex exposes the first text child's baseline. The surrounding
+     border-aware row contract now matches buttons instead of inventing a
+     second chip-only occupied height. */
+  vertical-align: baseline;
   white-space: nowrap;
 }
 
@@ -5543,6 +5787,15 @@ html.u-baseline-grid::after {
   --bf-ui-chip-background-active: var(--bf-color-background-information-active);
 }
 
+:where(.bf-theme) :where(.bf-chip.is-borderless) {
+  --bf-ui-chip-border: transparent;
+  --bf-ui-chip-border-hover: transparent;
+  --bf-ui-chip-border-active: transparent;
+  --bf-ui-chip-background: transparent;
+  --bf-ui-chip-background-hover: transparent;
+  --bf-ui-chip-background-active: transparent;
+}
+
 :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):hover {
   background-color: var(--bf-ui-chip-background-hover);
   border-color: var(--bf-ui-chip-border-hover);
@@ -5627,16 +5880,20 @@ html.u-baseline-grid::after {
   --bf-ui-status-background: color-mix(in srgb, var(--bf-color-background-alt) 70%, black);
   --bf-ui-status-color: var(--bf-color-button-positive-text);
   background-color: var(--bf-ui-status-background);
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-ui-status-color);
   display: inline-block;
+  inline-size: fit-content;
+  justify-self: start;
   font-family: var(--bf-body-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
   font-size: var(--bf-body-font-size, 1rem);
   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;
-  padding-block-end: var(--bf-h5-nudge-end);
-  padding-block-start: var(--bf-h5-nudge-start, 0.375rem);
+  margin: 0 0 var(--bf-single-line-row-margin-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);
   text-align: center;
   text-decoration: none;
@@ -5663,6 +5920,38 @@ html.u-baseline-grid::after {
   --bf-ui-status-color: var(--bf-color-button-negative-text);
 }
 
+/* Nested auxiliary surfaces fit a body-sized flex/grid host instead of
+   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);
+  margin-block: 0;
+  padding-block: var(--bf-nested-auxiliary-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);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:hover) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-hover);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:is(:active, [aria-pressed='true'], .is-selected)) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-active);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-nested) {
+  border-block-width: 0;
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  align-self: center;
+  line-height: var(--bf-nested-auxiliary-line-height);
+  vertical-align: middle;
+}
+
 
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear) {
   appearance: none;
@@ -5674,7 +5963,7 @@ html.u-baseline-grid::after {
   margin: 0;
   padding: 0;
   position: relative;
-  text-indent: -9999px;
+  text-indent: -624.9375rem;
 }
 
 :where(.bf-theme) :where(.bf-chip-dismiss) {
@@ -5686,7 +5975,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear)::before,
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear)::after {
   background: currentColor;
-  block-size: 2px;
+  block-size: 0.125rem;
   content: "";
   inline-size: 0.75rem;
   left: 50%;
@@ -5704,7 +5993,7 @@ html.u-baseline-grid::after {
 
 
 :where(.bf-theme) :where(.bf-search-box) {
-  --bf-search-box-action-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-search-box-action-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   --bf-search-box-trailing-inline-size: calc((var(--bf-search-box-action-inline-size) * 2) + var(--bf-border-width));
   display: flex;
   inline-size: 100%;
@@ -5721,12 +6010,12 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-search-box-reset, .bf-search-box-button) {
   align-items: center;
-  block-size: var(--bf-control-box-size);
+  block-size: auto;
   display: inline-flex;
   inline-size: var(--bf-search-box-action-inline-size);
+  inset-block: 0;
   justify-content: center;
   position: absolute;
-  top: 0;
 }
 
 :where(.bf-theme) :where(.bf-search-box-reset) {
@@ -5743,7 +6032,7 @@ html.u-baseline-grid::after {
   inset-inline-end: var(--bf-border-width);
   margin: 0;
   padding: 0;
-  text-indent: -9999px;
+  text-indent: -624.9375rem;
 }
 
 :where(.bf-theme) :where(.bf-search-box-button)::before {
@@ -5770,8 +6059,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-search-box-reset:focus-visible, .bf-search-box-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter) {
@@ -5786,7 +6075,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-search-and-filter-search-container) {
   align-items: stretch;
   background: transparent;
-  box-shadow: inset 0 -1px 0 var(--bf-color-border-high-contrast);
+  box-shadow: inset 0 -0.0625rem 0 var(--bf-color-border-high-contrast);
   display: flex;
   flex-wrap: wrap;
   gap: var(--bf-field-gap);
@@ -5802,7 +6091,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-box) {
-  --bf-search-and-filter-action-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-search-and-filter-action-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   --bf-search-and-filter-trailing-inline-size: calc(var(--bf-search-and-filter-action-inline-size) * 2);
   display: inline-flex;
   flex: 1 1 12rem;
@@ -5819,17 +6108,17 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-search-and-filter-search-button) {
   appearance: none;
   background: transparent;
-  block-size: var(--bf-control-box-size);
+  block-size: auto;
   border: 0;
   color: var(--bf-color-text-default);
   cursor: pointer;
   inline-size: var(--bf-search-and-filter-action-inline-size);
+  inset-block: 0;
   inset-inline-end: 0;
   margin: 0;
   padding: 0;
   position: absolute;
-  text-indent: -9999px;
-  top: 0;
+  text-indent: -624.9375rem;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-search-button)::before {
@@ -5856,16 +6145,16 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-search-button:focus-visible, .bf-search-and-filter-selected-count:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-clear) {
-  block-size: var(--bf-control-box-size);
+  block-size: auto;
   inline-size: var(--bf-search-and-filter-action-inline-size);
+  inset-block: 0;
   inset-inline-end: var(--bf-search-and-filter-action-inline-size);
   position: absolute;
-  top: 0;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-selected-count) {
@@ -5895,12 +6184,12 @@ html.u-baseline-grid::after {
   background-color: var(--bf-color-background-inputs);
   border: var(--bf-border-width) solid var(--bf-color-border-default);
   border-top: 0;
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   display: grid;
   gap: var(--bf-field-gap);
   opacity: 1;
   padding-bottom: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   padding-top: var(--bf-panel-padding-block);
   position: absolute;
   top: 100%;
@@ -5945,12 +6234,6 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-filter-panel-section-heading) {
-  font-family: var(--bf-h6-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
-  font-size: var(--bf-h6-font-size, 1rem);
-  font-style: var(--bf-h6-font-style, normal);
-  font-weight: var(--bf-h6-font-weight, 400);
-  line-height: var(--bf-h6-line-height, 1.5rem);
-  color: var(--bf-color-text-muted);
   margin: 0;
   padding-block: 0;
 }
@@ -5997,7 +6280,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-list-tree) {
   list-style: none;
   margin: 0;
-  padding-left: calc(var(--bf-baseline) * 0.5);
+  padding-left: 0;
 }
 
 :where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree) {
@@ -6011,27 +6294,29 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-list-tree-item) {
+  display: grid;
   margin: 0;
-  padding-left: calc(var(--bf-baseline) * 1.5);
+  padding-left: 0;
   position: relative;
 }
 
-:where(.bf-theme) :where(.bf-list-tree-link) {
+:where(.bf-theme) :where(a.bf-list-tree-link) {
   font-family: var(--bf-body-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
   font-size: var(--bf-body-font-size, 1rem);
   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);
   color: var(--bf-color-text-default);
+  border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-continuation) var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-list-tree-link):hover {
+:where(.bf-theme) :where(a.bf-list-tree-link:hover) {
   color: var(--bf-color-link-default);
   text-decoration: underline;
 }
@@ -6045,8 +6330,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-list-tree-link):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-list-tree-toggle) {
@@ -6058,14 +6343,14 @@ html.u-baseline-grid::after {
   align-items: center;
   background: transparent;
   border: 0;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-default);
   cursor: pointer;
-  display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
-  margin: 0 0 0 calc(var(--bf-baseline) * -1.5);
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: calc(var(--bf-baseline) * 0.25) calc(var(--bf-baseline) * 0.5);
+  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);
   text-align: left;
   width: 100%;
 }
@@ -6079,8 +6364,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-list-tree-toggle):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-list-tree-toggle)::before {
@@ -6092,20 +6377,63 @@ html.u-baseline-grid::after {
   content: "";
   flex: 0 0 1rem;
   inline-size: 1rem;
-  transform: rotate(-90deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
 }
 
 :where(.bf-theme) :where(.bf-list-tree-toggle[aria-expanded='true'])::before {
-  transform: rotate(0deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(0deg);
 }
 
 
 :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
+     component inset. Navigation depth is added separately below. */
+  /* Navigation copy uses one continuation rail 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. */
+  --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-group-gap: 1.5rem;
+  --bf-side-navigation-heading-list-gap: 0.5rem;
   color: var(--bf-color-text-inactive);
   display: block;
   inline-size: 100%;
 }
 
+:where(.bf-theme) :where(.bf-side-navigation-groups) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-side-navigation-group-gap);
+}
+
+:where(.bf-theme) :where(.bf-side-navigation-group) {
+  display: grid;
+  gap: var(--bf-side-navigation-heading-list-gap);
+  min-inline-size: 0;
+}
+
+/* Keep the divider and heading as one tight header. The group owns only the
+   larger transition from that header to its list, so the compensated rule
+   cannot change the heading/list phase. */
+:where(.bf-theme) :where(.bf-side-navigation-group-header) {
+  display: grid;
+  gap: 0rem;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-side-navigation-group-header) > hr {
+  inline-size: auto;
+  margin-inline: var(--bf-side-navigation-content-inset) 0;
+}
+
+/* A single-line group heading occupies four baselines. min-block-size keeps
+   that phase exact while still allowing a long heading to wrap and grow. */
+:where(.bf-theme) :where(.bf-side-navigation-group-header) > :where(.bf-side-navigation-heading) {
+  min-block-size: calc((var(--bf-baseline) * 4) - var(--bf-body-margin-bottom));
+}
+
 :where(.bf-theme) :where(.bf-side-navigation-drawer) {
   background: var(--bf-color-background-default);
   bottom: 0;
@@ -6122,7 +6450,7 @@ 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):where(.is-drawer-expanded) :where(.bf-side-navigation-drawer) {
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   transform: translateX(0);
 }
 
@@ -6152,7 +6480,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-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   padding-top: var(--bf-panel-padding-block);
   position: sticky;
   top: 0;
@@ -6175,9 +6503,9 @@ html.u-baseline-grid::after {
   display: inline-flex;
   gap: calc(var(--bf-baseline) * 0.5);
   justify-content: center;
-  margin: 0 0 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)));
-  padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
-  padding-inline: var(--bf-control-inline-padding-action);
+  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);
   text-decoration: none;
 }
 
@@ -6212,8 +6540,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-heading, .bf-side-navigation-heading.is-linked) {
@@ -6225,22 +6553,23 @@ html.u-baseline-grid::after {
   display: block;
   margin: 0 0 var(--bf-body-margin-bottom);
   padding-block: var(--bf-body-nudge-start) 0;
+  padding-inline: var(--bf-side-navigation-content-inset);
 }
 
-:where(.bf-theme) :where(.bf-side-navigation-list) {
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  list-style: none;
-  margin: 0 0 calc(var(--bf-baseline) * 2);
-  padding: 0 0 calc((var(--bf-baseline) * 2) - var(--bf-border-width));
+:where(.bf-theme) :where(.bf-side-navigation-heading.is-linked) {
+  padding-inline: 0;
 }
 
-:where(.bf-theme) :where(.bf-side-navigation-list:last-of-type) {
-  border-bottom: 0;
-  margin-bottom: 0;
-  padding-bottom: 0;
+:where(.bf-theme) :where(.bf-side-navigation-list) {
+  display: grid;
+  grid-auto-rows: var(--bf-single-line-row-block-size);
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title) {
+  display: grid;
   margin: 0;
   position: relative;
 }
@@ -6252,23 +6581,26 @@ html.u-baseline-grid::after {
   font-weight: var(--bf-body-font-weight, 400);
   line-height: var(--bf-body-line-height, 1.5rem);
   align-items: center;
+  align-self: start;
   background: transparent;
   border: 0;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-inactive);
   display: flex;
   gap: calc(var(--bf-baseline) * 0.5);
   inline-size: 100%;
   justify-content: flex-start;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: max(0rem, calc(var(--bf-control-block-padding-compact) - 0rem));
-  padding-inline: var(--bf-panel-padding-inline);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-side-navigation-content-inset);
+  --bf-side-navigation-row-inset: var(--bf-side-navigation-content-inset);
   position: relative;
   text-align: left;
   text-decoration: none;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-accordion-button) {
+  --bf-side-navigation-row-inset: var(--bf-side-navigation-disclosure-inset);
   gap: var(--bf-disclosure-gap);
 }
 
@@ -6277,22 +6609,21 @@ html.u-baseline-grid::after {
   font-weight: 600;
 }
 
-:where(.bf-theme) :where(.bf-side-navigation-heading, .bf-side-navigation-heading.is-linked),
 :where(.bf-theme) :where(.bf-side-navigation-list) > :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title) > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: var(--bf-panel-padding-inline);
+  padding-inline-start: var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 2));
+  padding-inline-start: calc(var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset)) + var(--bf-side-navigation-depth-step));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 4));
+  padding-inline-start: calc(var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset)) + (var(--bf-side-navigation-depth-step) * 2));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
@@ -6300,7 +6631,7 @@ html.u-baseline-grid::after {
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 6));
+  padding-inline-start: calc(var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset)) + (var(--bf-side-navigation-depth-step) * 3));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link:hover, .bf-side-navigation-accordion-button:hover) {
@@ -6309,13 +6640,17 @@ html.u-baseline-grid::after {
   text-decoration: none;
 }
 
+:where(.bf-theme) :where(a.bf-side-navigation-link:is(:hover, :active)) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-side-navigation-link:focus:not(:focus-visible), .bf-side-navigation-accordion-button:focus:not(:focus-visible)) {
   outline: none;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link:focus-visible, .bf-side-navigation-accordion-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true']) {
@@ -6486,13 +6821,17 @@ html.u-baseline-grid::after {
   text-decoration: none;
 }
 
+:where(.bf-theme) :where(a.bf-top-navigation-link:is(:hover, :active)) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-top-navigation-link:focus:not(:focus-visible), .bf-top-navigation-menu-toggle:focus:not(:focus-visible), .bf-top-navigation-search-toggle:focus:not(:focus-visible)) {
   outline: none;
 }
 
 :where(.bf-theme) :where(.bf-top-navigation-link:focus-visible, .bf-top-navigation-menu-toggle:focus-visible, .bf-top-navigation-search-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-top-navigation-item.is-selected) > :where(.bf-top-navigation-link),
@@ -6616,8 +6955,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-top-navigation-dropdown-item:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-top-navigation-search-label) {
@@ -6788,11 +7127,12 @@ html.u-baseline-grid::after {
   content: "";
   flex: 0 0 var(--bf-disclosure-icon-inline-size);
   inline-size: var(--bf-disclosure-icon-inline-size);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block));
   transition: transform 120ms ease;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-accordion-button[aria-expanded='false'], .bf-side-navigation-expand[aria-expanded='false'])::before {
-  transform: rotate(-90deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-expand) {
@@ -6857,14 +7197,34 @@ 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)));
   align-items: baseline;
   column-gap: var(--bf-side-navigation-icon-gap);
 }
 
+/* Icon navigation keeps one stable label edge. Rows may omit a decorative
+   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;
+}
+
+/* A collapsed icon rail cannot communicate an iconless destination. Remove
+   the alignment spacer with the hidden label so it cannot become a blank
+   visual affordance in that state. */
+:where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-link, .bf-side-navigation-text):not(:has(> .bf-side-navigation-icon))::before {
+  content: none;
+}
+
 /* Icon-navigation headings share the label edge, not the icon edge. This
    keeps section names aligned with both the menu copy and a tagged wordmark. */
-:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-heading, .bf-side-navigation-heading.is-linked) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + 1rem + var(--bf-side-navigation-icon-gap));
+:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-heading:not(.is-linked)) {
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
+}
+
+:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-heading.is-linked) > :where(.bf-side-navigation-link) {
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-icon) > svg {
@@ -6908,7 +7268,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-contextual-menu-dropdown) {
   background: var(--bf-color-background-default);
   border: var(--bf-border-width) solid var(--bf-color-border-default);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.28);
   display: none;
   list-style: none;
   margin: 0;
@@ -6942,7 +7302,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-group) + :where(.bf-contextual-menu-group) {
-  box-shadow: inset 0 1px 0 var(--bf-color-border-default);
+  box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-default);
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-link) {
@@ -6959,8 +7319,9 @@ html.u-baseline-grid::after {
   display: block;
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: var(--bf-panel-padding-inline);
+  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-inline: var(--bf-component-inline-inset-action);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -6986,8 +7347,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-link):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-link.is-disabled, .bf-contextual-menu-link[disabled]) {
@@ -7015,7 +7376,7 @@ html.u-baseline-grid::after {
   font-weight: var(--bf-body-font-weight, 400);
   line-height: var(--bf-body-line-height, 1.5rem);
   background-color: var(--bf-color-background-alt);
-  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-color-border-default), 0 12px 32px rgba(0, 0, 0, 0.24);
+  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;
@@ -7024,7 +7385,7 @@ html.u-baseline-grid::after {
   opacity: 0;
   padding-block-end: var(--bf-body-nudge-end);
   padding-block-start: var(--bf-body-nudge-start, 0.375rem);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   pointer-events: none;
   position: absolute;
   top: 100%;
@@ -7168,10 +7529,10 @@ html.u-baseline-grid::after {
   display: inline-flex;
   gap: calc(var(--bf-baseline) * 0.5);
   justify-content: center;
-  margin-bottom: 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)));
+  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);
+  padding-inline: var(--bf-control-inline-padding-action-bordered);
   text-align: center;
   text-decoration: none;
 }
@@ -7185,8 +7546,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-pagination-link:focus-visible, .bf-pagination-link.is-previous:focus-visible, .bf-pagination-link.is-next:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-pagination-link.is-active, .bf-pagination-link[aria-current='page'], .bf-pagination-link[aria-current='true']) {
@@ -7265,14 +7626,15 @@ html.u-baseline-grid::after {
   appearance: none;
   background: transparent;
   border: 0;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: flex;
   gap: var(--bf-disclosure-gap);
   inline-size: 100%;
   justify-content: flex-start;
-  min-block-size: var(--bf-control-box-size);
-  padding-block: var(--bf-control-block-padding);
+  margin-block-end: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
   padding-inline: 0;
   text-align: left;
 }
@@ -7282,8 +7644,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-accordion-tab):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-accordion-tab)::before {
@@ -7296,18 +7658,19 @@ html.u-baseline-grid::after {
   display: inline-block;
   flex: none;
   inline-size: var(--bf-disclosure-icon-inline-size);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block));
   transition: transform 120ms ease;
 }
 
 :where(.bf-theme) :where(.bf-accordion-tab[aria-expanded='false'])::before {
-  transform: rotate(-90deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
 }
 
 :where(.bf-theme) :where(.bf-accordion-panel) {
   margin: 0;
   overflow: hidden;
   padding-block-start: var(--bf-baseline);
-  padding-inline-start: calc(var(--bf-accordion-indent) + var(--bf-body-font-size, 1rem) + var(--bf-baseline));
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-accordion-panel[aria-hidden='true']) {
@@ -7373,7 +7736,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-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-modal-header) {
@@ -7447,7 +7810,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-code-snippet-header) {
   align-items: start;
   background: var(--bf-color-background-active);
-  box-shadow: inset 0 -1px 0 var(--bf-color-border-default);
+  box-shadow: inset 0 -0.0625rem 0 var(--bf-color-border-default);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -7469,7 +7832,7 @@ html.u-baseline-grid::after {
   margin: 0;
   overflow-wrap: anywhere;
   padding-block: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdowns) {
@@ -7484,7 +7847,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-code-snippet-header.is-stacked) :where(.bf-code-snippet-dropdowns) {
   justify-content: stretch;
   margin-inline-start: 0;
-  box-shadow: inset 0 1px 0 var(--bf-color-border-default);
+  box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-default);
   width: 100%;
 }
 
@@ -7503,12 +7866,12 @@ html.u-baseline-grid::after {
   min-block-size: calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-panel-padding-block) * 2));
   min-inline-size: 0;
   padding-block: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-action);
   text-align: start;
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdown) + :where(.bf-code-snippet-dropdown) {
-  box-shadow: inset 1px 0 0 var(--bf-color-border-default);
+  box-shadow: inset 0.0625rem 0 0 var(--bf-color-border-default);
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdown):focus:not(:focus-visible) {
@@ -7516,8 +7879,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdown):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block, .bf-code-snippet-block.is-icon, .bf-code-snippet-block.is-numbered) {
@@ -7532,7 +7895,7 @@ html.u-baseline-grid::after {
   min-inline-size: 0;
   overflow-x: auto;
   padding-block: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   tab-size: 2;
   white-space: pre;
 }
@@ -7548,7 +7911,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon) {
   cursor: copy;
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 3));
+  padding-inline-start: calc(var(--bf-component-inline-inset-continuation) + (var(--bf-baseline) * 3));
   position: relative;
 }
 
@@ -7560,7 +7923,7 @@ html.u-baseline-grid::after {
   line-height: var(--bf-h6-line-height, 1.5rem);
   color: var(--bf-color-text-muted);
   content: "$";
-  inset-inline-start: var(--bf-panel-padding-inline);
+  inset-inline-start: var(--bf-component-inline-inset-continuation);
   inset-block-start: var(--bf-panel-padding-block);
   position: absolute;
 }
@@ -7575,7 +7938,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon.is-copied) {
   background: color-mix(in srgb, var(--bf-color-background-alt) 78%, var(--bf-color-background-information-default));
-  box-shadow: inset 0 0 0 1px var(--bf-color-border-information);
+  box-shadow: inset 0 0 0 0.0625rem var(--bf-color-border-information);
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon):focus:not(:focus-visible) {
@@ -7583,8 +7946,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-numbered) {
@@ -7646,6 +8009,32 @@ html.u-baseline-grid::after {
   z-index: 40;
 }
 
+/* A responsive application brand occupies the persistent bar only while the
+ * full navigation brand is unavailable. The same public tagged-logo contract
+ * is used in both locations; state CSS guarantees that only one copy is
+ * 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));
+}
+
+:where(.bf-theme) :where(.bf-navigation-bar.is-responsive) {
+  margin-block-end: calc(var(--bf-border-width) * -1);
+}
+
+:where(.bf-theme) :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
+  flex: 1 1 12rem;
+  inline-size: auto;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-application:has(> .bf-navigation:not(.is-collapsed)))
+  > :where(.bf-navigation-bar.is-responsive)
+  :where(.bf-top-navigation-logo) {
+  visibility: hidden;
+}
+
 :where(.bf-theme) :where(.bf-navigation) {
   grid-column: 1 / -1;
   grid-row: 1 / -1;
@@ -7692,7 +8081,7 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer) {
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   transform: translateX(0);
   visibility: visible;
 }
@@ -7702,10 +8091,10 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-label) {
-  block-size: 1px;
+  block-size: 0.0625rem;
   clip-path: inset(50%);
-  inline-size: 1px;
-  max-inline-size: 1px;
+  inline-size: 0.0625rem;
+  max-inline-size: 0.0625rem;
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
@@ -7723,8 +8112,8 @@ html.u-baseline-grid::after {
   padding-inline: calc(var(--bf-baseline) * 1.25);
 }
 
-:where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-list) {
-  border-bottom-color: transparent;
+:where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-list)::after {
+  content: none;
 }
 
 :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) {
@@ -7737,6 +8126,14 @@ html.u-baseline-grid::after {
   grid-template-rows: minmax(0, 1fr);
 }
 
+:where(.bf-theme) :where(.bf-application:has(> .bf-navigation)):has(> .bf-aside.is-pinned:not(.is-collapsed)) {
+  grid-template-areas:
+    "navigation-bar navigation-bar"
+    "main aside";
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--bf-application-aside-width));
+  grid-template-rows: min-content minmax(0, 1fr);
+}
+
 :where(.bf-theme) :where(.bf-main) {
   grid-area: main;
   min-block-size: 0;
@@ -7775,7 +8172,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-aside.is-overlay, .bf-aside.is-drawer) {
   align-self: stretch;
   block-size: auto;
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   bottom: 0;
   grid-column: 1 / -1;
   grid-row: 1 / -1;
@@ -7865,14 +8262,14 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle)::after {
   background: var(--bf-color-border-default);
-  border-radius: 999px;
+  border-radius: 62.4375rem;
   content: "";
   inset-block: var(--bf-panel-padding-block);
-  inset-inline-start: calc(50% - 1px);
+  inset-inline-start: calc(50% - 0.0625rem);
   opacity: 0.95;
   position: absolute;
   transition: background-color 120ms ease, opacity 120ms ease;
-  width: 2px;
+  width: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle):hover::after,
@@ -7882,8 +8279,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle):focus-visible {
-  outline: 2px solid var(--bf-application-resize-handle-focus-ring);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-application-resize-handle-focus-ring);
+  outline-offset: -0.125rem;
 }
 
 @media (min-width: 64.75rem) {
@@ -7902,6 +8299,16 @@ html.u-baseline-grid::after {
     grid-template-columns: minmax(0, var(--bf-application-navigation-width)) minmax(0, 1fr) minmax(0, var(--bf-application-aside-width));
   }
 
+  :where(.bf-theme) :where(.bf-application:has(> .bf-navigation:not(.is-collapsed))) > :where(.bf-navigation-bar.is-responsive) {
+    block-size: 0;
+    border: 0;
+    min-block-size: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    visibility: hidden;
+  }
+
   :where(.bf-theme) :where(.bf-application:has(> .bf-navigation.is-collapsed)) {
     --bf-application-navigation-width: var(--bf-application-navigation-width-collapsed);
   }
@@ -7947,8 +8354,8 @@ html.u-baseline-grid::after {
 }
 
 /* The tagged treatment is opt-in. The Circle of Friends is aligned to the
- * first title line, then the 38px tag extends upward to the navigation edge.
- * Its 22px inline size preserves the established 38:22 (~1.73) tag ratio; the
+ * first title line, then the 2.375rem tag extends upward to the navigation edge.
+ * Its 1.375rem inline size preserves the established 38:22 (~1.73) tag ratio; the
  * tag must not stretch to the full occupied navigation row. */
 :where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) {
   min-inline-size: 0;
@@ -8002,13 +8409,11 @@ html.u-baseline-grid::after {
   line-height: var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5));
   overflow: visible;
   overflow-wrap: anywhere;
-  /* The first title line and the 16px mark share the mark's fixed centre:
-   * tag block-end minus the 6px inset minus half the mark. Symmetric title
-   * padding keeps the occupied row stable across all four type-density tiers. */
+  /* The first title line and the 1rem mark share the public brand-line centre.
+   * The derived brand block is twice that fixed centre, so the orange tag can
+   * extend upward without changing the title or adjacent-header baseline. */
   padding-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)
+    var(--bf-navigation-brand-line-center-block)
     - (var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
   );
   text-overflow: clip;
@@ -8089,11 +8494,15 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-in-page-navigation) {
   container-name: bf-in-page-navigation;
   container-type: inline-size;
-  margin-block: 0 var(--bf-section-space-shallow);
+  margin: 0;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-nav) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   max-block-size: 100dvb;
   min-inline-size: 0;
   overflow: auto;
@@ -8109,12 +8518,17 @@ html.u-baseline-grid::after {
   line-height: var(--bf-h6-line-height, 1.5rem);
   color: var(--bf-color-text-muted);
   display: block;
-  margin: 0 0 var(--bf-space-1);
-  padding-block: var(--bf-h6-nudge-start) var(--bf-h6-nudge-end);
+  margin-block: 0 var(--bf-h6-margin-bottom);
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h6-nudge-start);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-list) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
   border-inline-start: var(--bf-bar-thickness) solid var(--bf-color-border-low-contrast);
+  display: grid;
+  gap: var(--bf-stack-space);
   list-style: none;
   margin: 0;
   min-inline-size: 0;
@@ -8122,13 +8536,16 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-item) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   margin: 0;
   min-inline-size: 0;
   padding: 0;
   position: relative;
 }
 
-:where(.bf-theme) :where(.bf-in-page-navigation-link) {
+:where(.bf-theme) :where(a.bf-in-page-navigation-link) {
   font-family: var(--bf-body-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
   font-size: var(--bf-body-font-size, 1rem);
   font-style: var(--bf-body-font-style, normal);
@@ -8141,7 +8558,7 @@ html.u-baseline-grid::after {
   min-inline-size: 0;
   overflow: hidden;
   overflow-wrap: anywhere;
-  padding-block: calc(var(--bf-body-nudge-start) + var(--bf-space-half)) calc(var(--bf-body-nudge-end) + var(--bf-space-half));
+  padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
   padding-inline: var(--bf-space-2) 0;
   position: relative;
   text-decoration: none;
@@ -8149,7 +8566,7 @@ html.u-baseline-grid::after {
   -webkit-box-orient: vertical;
 }
 
-:where(.bf-theme) :where(.bf-in-page-navigation-link:hover) {
+:where(.bf-theme) :where(a.bf-in-page-navigation-link:hover) {
   color: var(--bf-color-text-default);
   text-decoration: none;
 }
@@ -8159,8 +8576,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-link.is-active, .bf-in-page-navigation-link[aria-current]) {
@@ -8216,8 +8633,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle > .bf-icon) {
@@ -8231,6 +8648,7 @@ html.u-baseline-grid::after {
     border-block-end: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: 0;
     max-block-size: none;
     overflow: visible;
     position: static;
@@ -8243,6 +8661,7 @@ html.u-baseline-grid::after {
   :where(.bf-theme) :where(.bf-in-page-navigation-list) {
     border: 0;
     display: flex;
+    gap: 0;
     grid-column: 1;
     grid-row: 1;
     margin: 0;
@@ -8307,7 +8726,8 @@ html.u-baseline-grid::after {
   :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) {
     background: var(--bf-color-background-alt);
     border-inline-start: var(--bf-bar-thickness) solid var(--bf-color-border-low-contrast);
-    display: block;
+    display: grid;
+    gap: var(--bf-stack-space);
     grid-column: 1 / -1;
     grid-row: 2;
     /* The mobile nav owns a bottom rule; reserve its thickness within the
@@ -8318,20 +8738,21 @@ html.u-baseline-grid::after {
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-item, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-item) {
-    display: block;
+    display: grid;
     max-inline-size: none;
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-link, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-link) {
     display: -webkit-box;
     overflow-wrap: anywhere;
-    padding-block: calc(var(--bf-body-nudge-start) + var(--bf-space-half)) calc(var(--bf-body-nudge-end) + var(--bf-space-half));
+    padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
     padding-inline: var(--bf-space-2) 0;
     white-space: normal;
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-list .bf-in-page-navigation-list, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-list .bf-in-page-navigation-list) {
-    display: block;
+    display: grid;
+    gap: var(--bf-stack-space);
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-link.is-active, .bf-in-page-navigation.is-expanded .bf-in-page-navigation-link[aria-current], .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-link.is-active, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-link[aria-current])::before {
@@ -8414,35 +8835,47 @@ html.u-baseline-grid::after {
 /* ------------------------------------------------------------------ */
 
 :where(.bf-theme) :where(.bf-table-of-contents) {
+  --bf-table-of-contents-section-gap: var(--bf-section-space-shallow);
+  align-content: start;
   container-name: bf-table-of-contents;
   container-type: inline-size;
-  margin-block: 0 var(--bf-section-space-shallow);
+  display: grid;
+  gap: var(--bf-table-of-contents-section-gap);
+  margin: 0;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-section) {
+  --bf-stack-space: 0rem;
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   margin: 0;
   min-inline-size: 0;
-  padding-block-end: var(--bf-space-2);
+  padding: 0;
+  position: relative;
 }
 
-:where(.bf-theme) :where(.bf-table-of-contents-section + .bf-table-of-contents-section) {
-  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  padding-block-start: calc(var(--bf-space-2) - var(--bf-border-width));
+:where(.bf-theme) :where(.bf-table-of-contents-section + .bf-table-of-contents-section)::before {
+  background: var(--bf-color-border-low-contrast);
+  block-size: var(--bf-border-width);
+  content: "";
+  inset-block-start: 0;
+  inset-inline: 0;
+  position: absolute;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-heading) {
-  font-family: var(--bf-h6-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
-  font-size: var(--bf-h6-font-size, 1rem);
-  font-style: var(--bf-h6-font-style, normal);
-  font-weight: var(--bf-h6-font-weight, 400);
-  line-height: var(--bf-h6-line-height, 1.5rem);
-  color: var(--bf-color-text-muted);
-  margin: 0 0 var(--bf-space-1);
-  padding-block: var(--bf-h6-nudge-start) var(--bf-h6-nudge-end);
+  color: var(--bf-color-text-default);
+  margin: 0;
+  padding-block-end: 0;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-list) {
+  --bf-stack-space: 0rem;
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   list-style: none;
   margin: 0;
   min-inline-size: 0;
@@ -8450,26 +8883,30 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-item) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   margin: 0;
   min-inline-size: 0;
   padding: 0;
 }
 
-:where(.bf-theme) :where(.bf-table-of-contents-link) {
+:where(.bf-theme) :where(a.bf-table-of-contents-link) {
   font-family: var(--bf-body-font-family, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
   font-size: var(--bf-body-font-size, 1rem);
   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);
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-link-default);
   display: block;
-  margin: 0;
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
   overflow-wrap: anywhere;
-  padding-block: calc(var(--bf-body-nudge-start) + var(--bf-space-half)) calc(var(--bf-body-nudge-end) + var(--bf-space-half));
+  padding-block: var(--bf-single-line-row-padding-block);
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-table-of-contents-link:hover) {
+:where(.bf-theme) :where(a.bf-table-of-contents-link:hover) {
   color: var(--bf-color-text-default);
   text-decoration: underline;
 }
@@ -8479,8 +8916,8 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-link.is-active, .bf-table-of-contents-link[aria-current]) {
@@ -8560,9 +8997,9 @@ html.u-baseline-grid::after {
   padding: 0;
 }
 
-:where(.bf-theme) :where(.bf-tiered-list-header) > :where(.bf-rule),
-:where(.bf-theme) :where(.bf-tiered-list-item) > :where(.bf-rule),
-:where(.bf-theme) :where(.bf-tiered-list-cta) > :where(.bf-rule) {
+:where(.bf-theme) :where(.bf-tiered-list-header) > hr,
+:where(.bf-theme) :where(.bf-tiered-list-item) > hr,
+:where(.bf-theme) :where(.bf-tiered-list-cta) > hr {
   grid-column: 1 / -1;
 }
 
@@ -8577,8 +9014,8 @@ html.u-baseline-grid::after {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
-  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-item) > :where(.bf-rule),
-  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-cta) > :where(.bf-rule) {
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-item) > hr,
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-cta) > hr {
     grid-column: 3 / span 6;
   }
 
@@ -8593,9 +9030,9 @@ html.u-baseline-grid::after {
 }
 
 /* ------------------------------------------------------------------ */
-/* Header split (≥ 64.75rem): unchanged 50/50 title/description.       */
+/* Header split (≥ 45rem): the shared readable 50/50 title/content split. */
 /* ------------------------------------------------------------------ */
-@container (width >= 64.75rem) {
+@container (width >= 45rem) {
   :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);
   }
@@ -8619,7 +9056,7 @@ html.u-baseline-grid::after {
      queries cannot style their own container, so responsive descendants span
      these tracks instead of relying on an ineligible self-query. */
   grid-template-columns: repeat(8, minmax(0, 1fr));
-  margin-block-end: var(--bf-section-space-shallow);
+  margin: 0;
   position: relative;
 }
 
@@ -8636,7 +9073,7 @@ html.u-baseline-grid::after {
 /* Responsive aspect media can make a shared subgrid track land between
    baselines. Snap that media box itself; the surrounding composition still
    does not own or erase any child's semantic margins. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-equal-height-row-item) > :where(.bf-aspect) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -8715,7 +9152,7 @@ html.u-baseline-grid::after {
 :where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-1))::before,
 :where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-2))::after {
   background-color: var(--bf-color-border-low-contrast);
-  block-size: 1px;
+  block-size: 0.0625rem;
   content: "";
   display: none;
   grid-column: 1 / -1;
@@ -8788,8 +9225,8 @@ html.u-baseline-grid::after {
 /* ------------------------------------------------------------------ */
 /* Gutter and margin escalation — viewport-based, all tiers            */
 /* Grid spec v0.3 §2.3: gutters set by global viewport breakpoint.     */
-/* Baseline Foundry models the spec's 460px x-small row as part of the */
-/* default <620px bracket because the values do not change at 460px.   */
+/* Baseline Foundry models the spec's 28.75rem x-small row as part of the */
+/* default <38.75rem bracket because the values do not change at 28.75rem.   */
 /* ------------------------------------------------------------------ */
 
 :where(.bf-theme) {
@@ -8860,9 +9297,7 @@ html.u-baseline-grid::after {
   margin-inline-start: 0;
 }
 
-:where(.bf-theme.bf-tier-app) :where(.bf-page) {
-  max-inline-size: none;
-}
+
 
 :where(.bf-theme) :where(.bf-panel-content, .bf-accordion-panel) :where(.bf-fixed-width) {
   padding-inline: 0;
@@ -8872,6 +9307,13 @@ html.u-baseline-grid::after {
   padding-inline: 0;
 }
 
+/* A page is the outer grid row and therefore owns its horizontal gutter.
+ * Fixed-width regions nested anywhere inside it retain their cap and
+ * centering behavior without introducing a second page inset. */
+:where(.bf-theme) :where(.bf-page) :where(.bf-fixed-width) {
+  padding-inline: 0;
+}
+
 /* ------------------------------------------------------------------ */
 /* Grid base — 4 columns, all tiers                                    */
 /* ------------------------------------------------------------------ */
@@ -8893,7 +9335,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-grid.is-guide) > * {
   background: color-mix(in srgb, var(--bf-color-accent) 18%, var(--bf-color-background-default));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-color-accent) 50%, var(--bf-color-rule));
+  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--bf-color-accent) 50%, var(--bf-color-rule));
   min-block-size: calc(var(--bf-baseline) * 4);
 }