actual-css 0.11.0 → 0.12.0

package/src/css/components/modal.css

@@ -8,13 +8,20 @@
  *
  * Public hooks:
  * --modal-size
+ * --modal-pad
  * --dialog-viewport-gap
  * --dialog-icon-size
  * --dialog-icon-glyph-size
  *
  * The corner close control is .close (components/close.css).
  *
+ * The body footer is a structural slot with no layout of its own: its action
+ * row is composed in markup (`<footer class="cluster justify-content-end">`),
+ * as in the drawer. A default row here would fight every composed one.
+ *
  * Internal:
+ * --dialog-inner-radius
+ * --dialog-close-reserve (header room for a corner close; zero without a close)
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -23,16 +30,28 @@
 :where(dialog).modal {
   /* --dialog-viewport-gap stays fallback-only so the responsive default can
      live in an internal token: a media query moves it without closing the
-     public hook.
-
-     calc() multiplication is not in the supported browser range, so the
-     doubled gap is spelled out with an additive calc. */
+     public hook. `-2x` is the gap on the two viewport edges, shared by the
+     width and height caps. */
   --dialog-viewport-gap-default: var(--space-40);
   --dialog-viewport-gap-2x: calc(
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) +
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default))
   );
 
+  /* The panel is borderless, so its inner and outer radius are the same. Kept
+     as one name for the padded wrapper and the header band; a .bleed band
+     inherits it from the wrapper, so none of them drifts from the corner. */
+  --dialog-inner-radius: var(--radius-lg);
+
+  /* Header room for a corner close. Unconditional baseline: without :has()
+     (Degraded tier) a header keeps too much room rather than a title running
+     under the close. Zeroed when the dialog has no close. */
+  --dialog-close-reserve: calc(
+    var(--close-size, var(--control-size)) +
+    var(--space-20) +
+    var(--space-30)
+  );
+
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button. */
   position: fixed;
@@ -46,7 +65,9 @@
      dynamic token; only the modal pins the small viewport. */
   --dialog-viewport-block: var(--viewport-block);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
-  border: var(--border-width) solid var(--border);
+  /* Zero rather than absent: the UA stylesheet draws `border: solid` on
+     dialog, and an authored edge reads as a hard seam against .bleed bands. */
+  border: 0;
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
   color: var(--text);
@@ -63,19 +84,81 @@
    * both edges, which reads as horizontal movement.
    */
   transform: translateY(0.35rem);
-  transition:
-    opacity var(--duration) var(--ease-exit),
-    transform var(--duration) var(--ease-exit);
+  transition-property: opacity, transform;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--ease-exit);
+}
+
+@media (forced-colors: active) {
+  /* With no authored border the panel edge disappears once colors collapse.
+     The browser forces the border color, so only the width is authored. */
+  :where(dialog).modal {
+    border: var(--border-width) solid CanvasText;
+  }
 }
 
 :where(dialog).modal > form,
 :where(dialog).modal > .stack {
+  --surface-pad: var(--modal-pad, var(--space-40));
+
   display: grid;
   gap: var(--space-40);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
+  border-radius: var(--dialog-inner-radius);
   overflow: auto;
   overscroll-behavior: contain;
-  padding: var(--space-40);
+  padding: var(--surface-pad);
+}
+
+/* Dialog chrome beside the padded body wrapper. Wrapping the close in the
+   trailing cluster keeps it in flow, not the absolute corner overlay. */
+:where(dialog).modal > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-30);
+  min-block-size: var(--close-size, var(--control-size));
+  padding: var(--modal-pad, var(--space-40));
+  border-start-start-radius: var(--dialog-inner-radius);
+  border-start-end-radius: var(--dialog-inner-radius);
+}
+
+/* Paint is not anatomy: the default band fill has zero specificity, so a
+   .background-* utility on the header replaces it. The layout above stays at
+   the component's weight — a composed .cluster must not reset the title/close
+   alignment. */
+:where(dialog.modal > header) {
+  background: var(--surface-subtle);
+}
+
+:where(dialog).modal > header > .media {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+:where(dialog).modal > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--close-size, var(--control-size));
+  margin-block: 0;
+}
+
+:where(dialog).modal > header > .cluster {
+  --cluster-wrap: nowrap;
+
+  flex: none;
+}
+
+/* The header stays fixed while the body wrapper owns overflow. Without :has()
+   these drop individually and compact dialogs keep ordinary block flow. */
+:where(dialog).modal[open]:has(> header) {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+:where(dialog).modal:has(> header) > :is(form, .stack) {
+  min-block-size: 0;
+  max-block-size: none;
 }
 
 @supports (block-size: 100svh) {
@@ -94,10 +177,21 @@
 
 :where(dialog).modal.scrollable > form,
 :where(dialog).modal.scrollable > .stack {
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
+/* Regions carry their own behaviour: a structural header or footer keeps its
+   size, every other child absorbs the free space and scrolls. Nothing here has
+   to detect which regions exist — an external header leaves the wrapper with
+   content + footer and this still holds. Each non-chrome child is its own
+   scrollport; wrap the body in one region for a single one. */
+:where(dialog).modal.scrollable > form > :is(header, footer),
+:where(dialog).modal.scrollable > .stack > :is(header, footer) {
+  flex: none;
+}
+
 :where(dialog).modal.scrollable > form > :not(:is(header, footer)),
 :where(dialog).modal.scrollable > .stack > :not(:is(header, footer)) {
   --dialog-focus-bleed: calc(
@@ -105,6 +199,7 @@
     max(var(--focus-ring-width), var(--border-width) * 2)
   );
 
+  flex: 1 1 auto;
   min-block-size: 0;
   /* Keep focus paint inside the clip without moving the body off the fixed
      header and footer edges. The reserve covers the thicker of the two
@@ -127,39 +222,36 @@
   margin-block-end: 0;
 }
 
-/* The close button is anchored to the dialog at top inline-end, out of the
-   content flow; headers reserve inline room so titles never run under it.
-   The form/.stack anatomy is structural, so it stays in :where() and never
-   lends .stack's specificity to a bare <form>. */
-:where(dialog).modal > :where(form, .stack) > header {
-  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
+/* A media row inside the structural header is title anatomy, so its heading
+   does not bring prose margins into the icon alignment. */
+:where(dialog).modal > :where(form, .stack) > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
 }
 
-:where(dialog).modal > :where(form, .stack) > footer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--gap);
+/* No close anywhere: reclaim the reserve. Deliberately coarse — a close in
+   the body keeps the reserve, which costs only room, never overlap. */
+:where(dialog).modal:not(:has(.close)) {
+  --dialog-close-reserve: 0px;
 }
 
-/* Confirmation layout — a focused message followed by a visually distinct
-   action band. The media primitive owns icon/content alignment; this variant
-   only removes the standard form inset so both regions can own their padding. */
-:where(dialog).modal.dialog-confirmation > form {
-  gap: 0;
-  padding: 0;
+/* The close button is anchored to the dialog at top inline-end, out of the
+   content flow; headers reserve inline room so titles never run under it. A
+   .bleed header keeps at least its band inset. The form/.stack anatomy is
+   structural, so it stays in :where() and never lends .stack's specificity to
+   a bare <form>. */
+:where(dialog).modal > :where(form, .stack) > header {
+  padding-inline-end: var(--dialog-close-reserve);
 }
 
-:where(dialog).modal.dialog-confirmation > form > .media {
-  gap: var(--space-40);
-  padding: var(--space-50);
+:where(dialog).modal > :where(form, .stack) > header:where(.bleed) {
+  padding-inline-end: max(var(--bleed-pad, 0px), var(--dialog-close-reserve));
 }
 
-:where(dialog).modal.dialog-confirmation > form > footer {
-  padding: var(--space-40) var(--space-50);
-  border-end-start-radius: calc(var(--radius-lg) - var(--border-width));
-  border-end-end-radius: calc(var(--radius-lg) - var(--border-width));
-  background: var(--surface-subtle);
+/* A corner .close that is a direct child of the chrome header needs the same
+   reserve, but never below the header's own pad. Kept as its own rule so an
+   unsupported :has() drops only this geometry, not the wrapper reserve. */
+:where(dialog).modal > header:has(> .close) {
+  padding-inline-end: max(var(--modal-pad, var(--space-40)), var(--dialog-close-reserve));
 }
 
 /* Intent boundary — inherited intents do not tint the icon well. A local
@@ -172,14 +264,17 @@
   --ui-fg: initial;
 }
 
+/* The size hooks are read here, never declared: an author sets them on the
+   icon's media row (or the dialog) so both the circle and the title that
+   centers on it inherit one value. A local declaration on .dialog-icon would
+   shadow that value for the circle while the title kept the inherited one —
+   the two centers would drift. An override on the icon alone is deliberately
+   local and moves only the circle. */
 .dialog-icon {
-  --dialog-icon-size: 3rem;
-  --dialog-icon-glyph-size: 1.5rem;
-
   display: inline-grid;
   place-items: center;
-  inline-size: var(--dialog-icon-size);
-  block-size: var(--dialog-icon-size);
+  inline-size: var(--dialog-icon-size, 3rem);
+  block-size: var(--dialog-icon-size, 3rem);
   flex: none;
   border-radius: var(--radius-full);
   background: var(--ui-bg, var(--surface-subtle));
@@ -189,25 +284,27 @@
 .dialog-icon > * {
   display: inline-grid;
   place-items: center;
-  inline-size: var(--dialog-icon-glyph-size);
-  block-size: var(--dialog-icon-glyph-size);
-  font-size: var(--dialog-icon-glyph-size);
+  inline-size: var(--dialog-icon-glyph-size, 1.5rem);
+  block-size: var(--dialog-icon-glyph-size, 1.5rem);
+  font-size: var(--dialog-icon-glyph-size, 1.5rem);
   line-height: 1;
 }
 
-@media (max-width: 30rem) {
-  :where(dialog).modal.dialog-confirmation > form > .media,
-  :where(dialog).modal.dialog-confirmation > form > footer {
-    padding: var(--space-40);
-  }
+/* A leading icon well centers the first heading of the text column beside it:
+   the heading occupies the icon row, so its text centers without a
+   font-relative nudge, and following copy stays in the same column. Keyed on
+   the media anatomy, not on the dialog, so a card or page row composes it too. */
+.media > .dialog-icon + * > :is(h1, h2, h3, h4, h5, h6):first-child {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--dialog-icon-size, 3rem);
+  margin-block: 0;
 }
 
 :where(dialog).modal[open] {
   opacity: 1;
   transform: none;
-  transition:
-    opacity var(--duration) var(--ease-enter),
-    transform var(--duration) var(--ease-enter);
+  transition-timing-function: var(--ease-enter);
 }
 
 @starting-style {
@@ -222,31 +319,22 @@
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel carries the character
      curves. */
-  transition: opacity var(--duration) ease;
+  transition-property: opacity;
+  transition-duration: var(--duration);
+  transition-timing-function: ease;
 }
 
 @supports (transition-behavior: allow-discrete) {
+  /* Add the discrete top-layer pair to the property list. Duration and timing
+     stay on the base rules, so [open] still only swaps the easing. */
   :where(dialog).modal {
-    transition:
-      opacity var(--duration) var(--ease-exit),
-      transform var(--duration) var(--ease-exit),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
-  }
-
-  :where(dialog).modal[open] {
-    transition:
-      opacity var(--duration) var(--ease-enter),
-      transform var(--duration) var(--ease-enter),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
+    transition-property: opacity, transform, overlay, display;
+    transition-behavior: allow-discrete;
   }
 
   :where(dialog).modal::backdrop {
-    transition:
-      opacity var(--duration) ease,
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
+    transition-property: opacity, overlay, display;
+    transition-behavior: allow-discrete;
   }
 }
 

package/src/css/components/navbar.css

@@ -3,8 +3,8 @@
  *
  * Docs: docs/pages/components/navbar.md
  *
- * .navbar is a horizontal bar; .navbar-brand is the brand link; .navbar-nav is
- * the inline link list using .nav-link items. .nav-list is the vertical nav
+ * .navbar is a horizontal bar; .navbar-brand is the brand link; the inline
+ * links are a .cluster using .nav-link items. .nav-list is the vertical nav
  * list shared with .drawer, fed by the shared --gap token.
  *
  * Internal:
@@ -53,17 +53,6 @@
   border-radius: var(--radius-sm);
 }
 
-.navbar-nav {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .nav-link {
   display: inline-flex;
   align-items: center;
@@ -86,19 +75,16 @@
    removed everywhere else, never serialized as aria-current="false".
    Selection never changes text metrics: the shared medium weight is kept and
    the current link is carried by the selected accent. */
-.nav-link[aria-current] {
-  background: var(--surface-subtle);
-  color: var(--state-selected);
-}
-
 .nav-link:hover {
   background: var(--surface-subtle);
   color: var(--text);
 }
 
-/* A current link keeps its accent on hover: without this, the hover rule above
-   would drop it back to --text. The surface hover still applies. */
-.nav-link[aria-current]:hover {
+/* Current last, equal specificity to :hover (0,2,0): a hovered current link
+   keeps the selected accent instead of dropping to --text. The surface fill is
+   shared with the hover rule above. */
+.nav-link[aria-current] {
+  background: var(--surface-subtle);
   color: var(--state-selected);
 }
 
@@ -118,19 +104,22 @@
     color: var(--ui-fg, var(--text));
   }
 
-  .nav-link[aria-current],
-  .nav-link[aria-current]:hover {
+  /* After :hover so a hovered current link keeps the selected accent. */
+  .nav-link[aria-current] {
     color: var(--ui-fg, var(--state-selected));
   }
 }
 
 /* Nav list — a vertical navigation list. Used by .drawer for stacked links.
    Links fill each row so the whole line is an interactive target; the
-   horizontal .navbar-nav links keep their intrinsic size. */
+   horizontal .cluster links keep their intrinsic size. */
+/* A vertical nav reads as one list, not a stack of separate buttons: each row
+   is already a control-height target, so the rows sit a hair apart. The grid
+   is the component's own layout; for a horizontal row use .cluster instead. */
 .nav-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  --gap: var(--space-20);
+  --gap: var(--space-10);
   gap: var(--gap);
   margin: 0;
   padding: 0;

package/src/css/core/base.css

@@ -7,7 +7,7 @@
  * Public hooks:
  * --link
  * --hr-space
- * --font-width / --font-width-dense (see variants.css for the dense application)
+ * --font-width (the document's font-stretch; a theme typography choice)
  */
 
 body {

package/src/css/core/reset.css

@@ -36,7 +36,8 @@ select {
 
   *,
   *::before,
-  *::after {
+  *::after,
+  ::backdrop {
     animation-duration: 0.01ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;

package/src/css/core/theme.css

@@ -79,6 +79,10 @@
      fields, a solid band), which rules out the primary itself. */
   --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
+  /* Solid fills take a stronger wash than the subtle shared overlay. Black in
+     both schemes on purpose: a solid button darkens on hover even in dark mode
+     (see themes/gradient.css), unlike the neutral washes. */
+  --hover-overlay-solid: rgb(0 0 0 / 0.14);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
   --radius: 0.5rem;

package/src/css/core/tokens.css

@@ -20,7 +20,6 @@
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --font-width: 100%;
-  --font-width-dense: 95%;
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
@@ -104,8 +103,9 @@
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .compact/.spacious (variants.css) switch geometry without changing
-     --control-font-size. Local .sm/.lg component sizes switch all three.
+     .compact/.spacious (variants.css) switch geometry (--control-size,
+     --control-pad-x) without changing --control-font-size. Local .sm/.lg
+     component sizes switch all three.
 
      Inline choices (checkbox, radio, switch) are typographic, not field-sized:
      they sit on a line of text, so they follow --control-font-size through
@@ -116,17 +116,35 @@
 
      --control-pad-x is the opposite kind of token: a resolved geometry length,
      not an em ratio. Every part of one control must see the same horizontal
-     distance, so it is stated in the typographic tokens rather than an em
-     whose value would change on a descendant with its own font size (the
-     input-icon glyph, made larger by --input-icon-size). It mirrors
-     --control-font-size and is rebound beside it at the .sm/.lg boundaries
-     (variants.css); declaring it only in :root would freeze the md value,
-     because a var() inside a custom property resolves where it is declared. */
+     distance, so it is stated in lengths rather than an em whose value would
+     change on a descendant with its own font size (the input-icon glyph, made
+     larger by --input-icon-size).
+
+     Like --control-size, it is a scale plus a selection: themes set the
+     -sm/-md/-lg steps, and :root, .sm/.lg and .compact/.spacious (variants.css)
+     pick one. A theme that wrote --control-pad-x itself would be overwritten
+     by every size and density boundary — bootstrap-v6's 12px became a wider
+     13px inside .compact. The selection is rebound at each boundary because a
+     var() inside a custom property resolves where it is declared.
+
+     The boundaries also write --control-step-sm/-md/-lg: which step is
+     selected, as 0/1 weights that mean the same under every theme. A theme
+     that sets its own steps rebuilds the selection from them in its own block
+     (bootstrap-v6.css), so a nested island of it reads its steps without
+     resetting the density it sits in. Never rebind on every [data-theme]: a
+     palette-only island then became a geometry boundary that an inherited
+     --control-size or --control-pad-x no longer crossed. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: var(--font-size-md);
+  --control-pad-x-sm: var(--font-size-xs);
+  --control-pad-x-md: var(--font-size-md);
+  --control-pad-x-lg: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-md);
+  --control-step-sm: 0;
+  --control-step-md: 1;
+  --control-step-lg: 0;
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;

package/src/css/core/variants.css

@@ -11,17 +11,21 @@
  *   components/badge.css   — .badge default soft behind explicit --ui-*
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
- * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
- * only, plus a slight typographic width bonus. Density never changes font size
- * or icon size. Controls consume --control-size; non-control components may
+ * Three axes, each predictable on its own:
+ *   .sm/.lg            size    — typography + geometry, local to a component
+ *   .compact/.spacious density — rhythm + geometry, inherited by a region
+ *   .tight/.loose      rhythm  — --gap only, inherited by a region
+ *
+ * Density never touches typography: no font size, icon size or font width.
+ * A width bonus through font-stretch only showed on typefaces with a wdth axis,
+ * so .compact meant something different per OS and font; a condensed table is
+ * a typographic decision for the application. Controls consume --control-size
+ * and --control-pad-x, so a compact control is shorter and narrower (a height
+ * change alone read as the same control squashed); non-control components may
  * consume --density-* when the context should affect their local rhythm.
- * .compact applies --font-width-dense through font-stretch (a variable wdth
- * axis when available, otherwise normal width-face matching); layout must
- * never depend on the narrowing being available. .spacious restores
- * --font-width, so a spacious island inside a compact context returns to the
- * normal width exactly as it restores its own gap, spacing, and control size.
- * Themes whose typeface has no useful width axis opt out with
- * --font-width-dense: 100%.
+ *
+ * .tight/.loose reuse the density --gap steps, so a tight row and a compact
+ * one share one rhythm.
  *
  * .sm/.lg are local size roles, not shared measurements. Shared control
  * participants below map both typography and geometry; components with
@@ -60,18 +64,35 @@
   --ui-border: var(--border);
 }
 
+/* Each boundary selects a control step twice: the values, resolved here, and
+   the 0/1 step weights a nested [data-theme] island rebuilds them from
+   (tokens.css). */
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  font-stretch: var(--font-width-dense);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 .spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  font-stretch: var(--font-width);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
+}
+
+.tight {
+  --gap: var(--space-20);
+}
+
+.loose {
+  --gap: var(--space-50);
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
@@ -100,7 +121,10 @@
 ).sm {
   --control-size: var(--control-size-sm);
   --control-font-size: var(--font-size-sm);
-  --control-pad-x: var(--font-size-sm);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 :where(
@@ -124,7 +148,10 @@
 ).lg {
   --control-size: var(--control-size-lg);
   --control-font-size: var(--font-size-lg);
-  --control-pad-x: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable

package/src/css/forms/form-actions.css

@@ -1,30 +1,35 @@
 /*
- * Form actions — bottom form bar with sticky variant.
+ * Form actions — the role of a .cluster action row that closes a form.
  *
  * Docs: docs/pages/forms/form-actions.md
  *
- * A flex cluster of buttons/actions that closes a form. The sticky variant
- * docks to the viewport bottom with a translucent blur where supported; at
- * rest it stays visually neutral so it does not double as a separator.
+ * Markup: `<div class="cluster form-actions">`. The cluster owns the row
+ * (flex, wrap, gap); this role owns the form-specific alignment policy and the
+ * opt-in sticky variant. The distance to the fields above belongs to the
+ * parent layout (.stack on the form), never to a margin here: a margin would
+ * add to a stack's gap. The sticky variant docks to the viewport bottom with a
+ * translucent blur where supported; at rest it stays visually neutral so it
+ * does not double as a separator.
  *
  * Public hooks:
  * --form-actions-align
  * --form-actions-justify
- * --form-actions-margin-block-start
  *
  * Internal:
  * --form-actions-sticky-block-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-inline-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-padding (owned by .form-actions.sticky)
  */
+
+/* The policy hooks write the properties themselves rather than relaying
+   --cluster-*: a relay would inherit into any .cluster nested in the row.
+   These are equal-specificity overrides of .cluster, so they win only because
+   forms load after layout in the official bundle (tests/css-audit.test.js
+   guards the order); utilities load later and keep the author's last word. On
+   this row --cluster-justify/--cluster-align have no effect. */
 .form-actions {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--gap);
   align-items: var(--form-actions-align, center);
   justify-content: var(--form-actions-justify, flex-start);
-  margin-block-start: var(--form-actions-margin-block-start, var(--space-50));
 }
 
 /* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent