actual-css 0.3.0 → 0.3.1

package/dist/actual.css

@@ -530,6 +530,207 @@ small {
   --intent-fg: var(--neutral-fg);
 }
 
+/* Prose before layout: layout primitives (.stack, .cluster) reset child
+   margins and must win over .prose's flow margins at equal specificity —
+   source order is the tie-breaker, so prose loads first. */
+/*
+ * Prose is the opt-in rich text scope for authored content.
+ *
+ * Global element styles stay mild so app UI is not shaped accidentally. Page
+ * layout, forms, cards, navigation, and app tables remain outside this scope.
+ *
+ * Public hooks:
+ * --prose-size
+ * --prose-line-height
+ * --prose-measure
+ * --prose-flow
+ * --prose-heading-line-height
+ * --prose-h1
+ * --prose-h2
+ * --prose-h3
+ * --prose-h4
+ */
+
+.prose {
+  /* Prose scale */
+  --prose-size: 1rem;
+  --prose-line-height: 1.7;
+  --prose-measure: 70ch;
+  --prose-flow: 1em;
+  --prose-heading-line-height: 1.2;
+  --prose-h1: 2rem;
+  --prose-h2: 1.5rem;
+  --prose-h3: 1.25rem;
+  --prose-h4: 1.125rem;
+
+  max-inline-size: var(--prose-measure);
+  color: var(--text);
+  font-size: var(--prose-size);
+  line-height: var(--prose-line-height);
+  overflow-wrap: break-word;
+}
+
+.prose :where(p, ul, ol, dl, blockquote, pre, table, figure) {
+  margin-block: var(--prose-flow) 0;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6) {
+  margin-block: 1.5em 0;
+  color: var(--text);
+  font-weight: var(--font-weight-strong);
+  line-height: var(--prose-heading-line-height);
+}
+
+.prose :where(p, li, blockquote) {
+  text-wrap: pretty;
+}
+
+.prose > :first-child {
+  margin-block-start: 0;
+}
+
+.prose h1 {
+  font-size: var(--prose-h1);
+}
+
+.prose h2 {
+  font-size: var(--prose-h2);
+}
+
+.prose h3 {
+  font-size: var(--prose-h3);
+}
+
+.prose h4 {
+  font-size: var(--prose-h4);
+}
+
+.prose a {
+  color: var(--primary);
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+.prose a:hover {
+  text-decoration-thickness: 0.12em;
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .prose a:hover {
+    color: color-mix(in oklch, var(--primary), var(--text) 15%);
+  }
+}
+
+.prose :where(ul, ol) {
+  padding-inline-start: 1.5em;
+}
+
+.prose li + li {
+  margin-block-start: 0.35em;
+}
+
+.prose code {
+  padding: 0.15em 0.3em;
+  border-radius: var(--radius-sm);
+  background: var(--surface-subtle);
+  color: var(--text);
+  font-size: 0.875em;
+}
+
+/* Visual twin of .key (components/key.css) — keep the two recipes in sync. */
+.prose kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.75em;
+  min-block-size: 1.6em;
+  padding-inline: 0.45em;
+  border: var(--border-width) solid var(--border);
+  border-block-end-width: calc(var(--border-width) * 2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-raised);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: 0.08em;
+}
+
+.prose pre {
+  overflow-x: auto;
+  padding: 1em;
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-subtle);
+}
+
+.prose pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.prose blockquote {
+  padding-inline-start: 1em;
+  border-inline-start: var(--border-width) solid var(--border);
+  color: var(--text-muted);
+}
+
+.prose figure {
+  margin-inline: 0;
+}
+
+.prose figcaption {
+  margin-block-start: 0.5em;
+  color: var(--text-muted);
+  font-size: 0.875em;
+}
+
+.prose table {
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+.prose th,
+.prose td {
+  padding: 0.5em;
+  border-block-end: var(--border-width) solid var(--border);
+  text-align: start;
+}
+
+/* Lead paragraph: a slightly larger, more relaxed reading-introduction text.
+   Non-fluid and always available — use .text-lead from the optional fluid
+   module for marketing/display surfaces. */
+.lead {
+  font-size: 1.125em;
+  line-height: var(--line-height-relaxed);
+}
+
+/* Readable content measure. Composes with .center for centering or with
+   margin-inline: auto for a one-off centered block. */
+.measure {
+  max-inline-size: var(--prose-measure, 70ch);
+}
+
+.prose.sm {
+  --prose-size: 0.9375rem;
+  --prose-h1: 1.75rem;
+  --prose-h2: 1.375rem;
+  --prose-h3: 1.125rem;
+  --prose-h4: 1rem;
+}
+
+.prose.lg {
+  --prose-size: 1.125rem;
+  --prose-measure: 72ch;
+  --prose-h1: 2.25rem;
+  --prose-h2: 1.625rem;
+  --prose-h3: 1.375rem;
+  --prose-h4: 1.25rem;
+}
+
 /*
  * Core layout primitives: stack, cluster, center, frame, app-shell, media,
  * sidebar-layout. Each primitive owns a single, readable behavior; they are
@@ -545,13 +746,26 @@ small {
  * --sidebar-layout-size
  *
  * Child contracts:
- * .stack owns vertical rhythm: direct-child margins are reset, spacing comes
- *   from --gap.
+ * .stack owns vertical rhythm: direct-child block-axis margins are reset,
+ *   spacing comes from --gap, inline margins stay free.
  * .cluster owns inline rhythm: direct-child margins are reset, spacing comes
  *   from --gap.
  * .frame sizes direct media children (img/video/iframe/canvas/svg) to fill the
  *   frame.
  */
+
+/* Responsive recipes:
+   - avatar/icon + flexible content -> .media
+   - inline items that wrap when space runs out -> .cluster (keep wrapping)
+   - content + aside -> .sidebar-layout inside .container-query
+   - row that becomes a column when constrained -> .switcher (optional module)
+
+   Anti-patterns:
+   - viewport breakpoints for ordinary composition
+   - fixed grid templates (--grid-columns) where .grid/.sidebar-layout express
+     the layout
+   - nowrap on page-level compositions; prefer wrapping and container-aware
+     primitives */
 .container-query {
   container-type: inline-size;
 }
@@ -562,8 +776,10 @@ small {
   gap: var(--gap);
 }
 
+/* .stack owns the block axis only: block margins reset, inline margins stay
+   free (self-centering children via margin-inline: auto keep working). */
 .stack > * {
-  margin: 0;
+  margin-block: 0;
 }
 
 .cluster {
@@ -646,6 +862,19 @@ small {
  * --grid-min
  * --grid-columns
  */
+
+/* --grid-columns replaces the intrinsic auto-fit template: once set, the
+   grid no longer collapses on its own — the author owns narrow-container
+   collapse. Prefer .sidebar-layout inside .container-query for content +
+   aside layouts; reserve --grid-columns for genuinely fixed or asymmetric
+   templates. */
+
+/* Recipe:
+   - N equal cards that collapse when narrow -> .grid (auto-fit, tune
+     --grid-min) or .grid-2/3/4/6 inside .container-query
+   - content + aside -> .sidebar-layout inside .container-query
+   - fixed or asymmetric columns -> --grid-columns with an explicit collapse
+     rule of your own */
 .grid {
   display: grid;
   gap: var(--gap);
@@ -740,14 +969,18 @@ small {
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline set --ui-* for components that opt into
- * shared variants. .inverted is a surface modifier, not a variant: it also
- * paints the element directly (background/color/border-color) so it works on
- * any block, competing with component surface treatments (.card.subtle).
+ * shared variants. .inverted is a surface modifier, not a variant: it paints
+ * the element directly (background/color/border-color) so it works on any bare
+ * block, and remaps the shared --ui-* tokens so participating components
+ * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
+ * before components, so a component with its own explicit surface (e.g.
+ * .accordion) naturally keeps that surface — .inverted never forces a
+ * non-participant.
  * Component-specific defaults (.btn solid-by-default, .badge
  * soft-by-default, .alert soft-by-default) live with their components:
  *   components/button.css — .btn default solid + .btn.ghost + .btn.link
- *   components/badge.css   — .badge default soft
- *   components/alert.css   — .alert default soft (consumes --ui-* directly)
+ *   components/badge.css   — .badge default soft behind explicit --ui-*
+ *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
  * .sm/.lg set shared density tokens: spacing rhythm and geometry only.
  * Density never changes typography — controls keep their font-size and
@@ -775,18 +1008,23 @@ small {
 
 .outline {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
-  --ui-border: var(--intent, var(--border));
-}
-
-/* Inverse surface treatment. Components (e.g. .card) compose through --ui-*;
-   the direct background/color/border-color also make .inverted useful on a
-   generic element. --heading is set so global headings (var(--heading, inherit))
-   do not inherit an outside heading color onto the dark surface. */
+  --ui-fg: var(--intent, currentColor);
+  --ui-border: var(--intent, currentColor);
+}
+
+/* Inverse surface treatment. Paints the element directly (so it works on any
+   bare block) and remaps the shared --ui-* tokens so opt-in components
+   (.card, .navbar) invert through their own rules. Because this loads before
+   component base surfaces, components with their own explicit surface
+   (e.g. .accordion) keep it — participation is opt-in, never forced. --heading
+   is set so global headings (var(--heading, inherit)) do not inherit an outside
+   heading color onto the dark surface; surface-owning descendants derive
+   their contextual aliases from their own local surface. */
 .inverted {
   --ui-bg: var(--surface-solid);
   --ui-fg: var(--surface);
   --ui-border: transparent;
+  --ui-hover-bg: var(--surface-solid);
 
   --heading: var(--surface);
   --busy-overlay-bg: var(--surface-solid);
@@ -822,208 +1060,14 @@ small {
     );
     /* @sync soft-recipe */
   }
-}
-
-/* Interactive hover recipes live in the components that consume them:
-     components/button.css and components/badge.css. */
 
-/*
- * Prose is the opt-in rich text scope for authored content.
- *
- * Global element styles stay mild so app UI is not shaped accidentally. Page
- * layout, forms, cards, navigation, and app tables remain outside this scope.
- *
- * Public hooks:
- * --prose-size
- * --prose-line-height
- * --prose-measure
- * --prose-flow
- * --prose-heading-line-height
- * --prose-h1
- * --prose-h2
- * --prose-h3
- * --prose-h4
- */
-
-.prose {
-  /* Prose scale */
-  --prose-size: 1rem;
-  --prose-line-height: 1.7;
-  --prose-measure: 70ch;
-  --prose-flow: 1em;
-  --prose-heading-line-height: 1.2;
-  --prose-h1: 2rem;
-  --prose-h2: 1.5rem;
-  --prose-h3: 1.25rem;
-  --prose-h4: 1.125rem;
-
-  max-inline-size: var(--prose-measure);
-  color: var(--text);
-  font-size: var(--prose-size);
-  line-height: var(--prose-line-height);
-  overflow-wrap: break-word;
-}
-
-.prose :where(p, ul, ol, dl, blockquote, pre, table, figure) {
-  margin-block: var(--prose-flow) 0;
-}
-
-.prose :where(h1, h2, h3, h4, h5, h6) {
-  margin-block: 1.5em 0;
-  color: var(--text);
-  font-weight: var(--font-weight-strong);
-  line-height: var(--prose-heading-line-height);
-}
-
-.prose :where(p, li, blockquote) {
-  text-wrap: pretty;
-}
-
-.prose > :first-child {
-  margin-block-start: 0;
-}
-
-.prose h1 {
-  font-size: var(--prose-h1);
-}
-
-.prose h2 {
-  font-size: var(--prose-h2);
-}
-
-.prose h3 {
-  font-size: var(--prose-h3);
-}
-
-.prose h4 {
-  font-size: var(--prose-h4);
-}
-
-.prose a {
-  color: var(--primary);
-  text-decoration-line: underline;
-  text-decoration-thickness: 0.08em;
-  text-underline-offset: 0.18em;
-}
-
-.prose a:hover {
-  text-decoration-thickness: 0.12em;
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  .prose a:hover {
-    color: color-mix(in oklch, var(--primary), var(--text) 15%);
+  .inverted {
+    --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black);
   }
 }
 
-.prose :where(ul, ol) {
-  padding-inline-start: 1.5em;
-}
-
-.prose li + li {
-  margin-block-start: 0.35em;
-}
-
-.prose code {
-  padding: 0.15em 0.3em;
-  border-radius: var(--radius-sm);
-  background: var(--surface-subtle);
-  color: var(--text);
-  font-size: 0.875em;
-}
-
-/* Visual twin of .key (components/key.css) — keep the two recipes in sync. */
-.prose kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: 1.75em;
-  min-block-size: 1.6em;
-  padding-inline: 0.45em;
-  border: var(--border-width) solid var(--border);
-  border-block-end-width: calc(var(--border-width) * 2);
-  border-radius: var(--radius-sm);
-  background: var(--surface-raised);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-  vertical-align: 0.08em;
-}
-
-.prose pre {
-  overflow-x: auto;
-  padding: 1em;
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface-subtle);
-}
-
-.prose pre code {
-  padding: 0;
-  background: transparent;
-}
-
-.prose blockquote {
-  padding-inline-start: 1em;
-  border-inline-start: var(--border-width) solid var(--border);
-  color: var(--text-muted);
-}
-
-.prose figure {
-  margin-inline: 0;
-}
-
-.prose figcaption {
-  margin-block-start: 0.5em;
-  color: var(--text-muted);
-  font-size: 0.875em;
-}
-
-.prose table {
-  inline-size: 100%;
-  border-collapse: collapse;
-}
-
-.prose th,
-.prose td {
-  padding: 0.5em;
-  border-block-end: var(--border-width) solid var(--border);
-  text-align: start;
-}
-
-/* Lead paragraph: a slightly larger, more relaxed reading-introduction text.
-   Non-fluid and always available — use .text-lead from the optional fluid
-   module for marketing/display surfaces. */
-.lead {
-  font-size: 1.125em;
-  line-height: var(--line-height-relaxed);
-}
-
-/* Readable content measure. Composes with .center for centering or with
-   margin-inline: auto for a one-off centered block. */
-.measure {
-  max-inline-size: var(--prose-measure, 70ch);
-}
-
-.prose.sm {
-  --prose-size: 0.9375rem;
-  --prose-h1: 1.75rem;
-  --prose-h2: 1.375rem;
-  --prose-h3: 1.125rem;
-  --prose-h4: 1rem;
-}
-
-.prose.lg {
-  --prose-size: 1.125rem;
-  --prose-measure: 72ch;
-  --prose-h1: 2.25rem;
-  --prose-h2: 1.625rem;
-  --prose-h3: 1.375rem;
-  --prose-h4: 1.25rem;
-}
+/* Interactive hover recipes live in the components that consume them:
+     components/button.css and components/badge.css. */
 
 /* Controls */
 /*
@@ -1046,11 +1090,16 @@ small {
  * --btn-focus-color
  * --btn-gap
  * --btn-hover-overlay
+ * --btn-default-bg
+ * --btn-default-fg
+ * --btn-default-border
+ * --btn-border-color
  *
  * Internal:
  * --btn-bg
  * --btn-fg
  * --btn-border
+ * --btn-default-hover-bg
  * --btn-focus-ring-color
  * --btn-border-block-end-color
  * --btn-border-block-end-width
@@ -1075,6 +1124,7 @@ small {
   --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral))));
   --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg))));
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
+  --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
   --btn-focus-color: var(--intent, var(--focus));
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
@@ -1127,7 +1177,7 @@ small {
    fallbacks make .btn solid by default; .ghost/.link are .btn-only variants. */
 .btn.ghost {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
+  --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
 }
 
@@ -1145,12 +1195,12 @@ small {
    Declared outside :hover: the variables resolve only when the hover rule
    reads them, so the values are inert until interaction. */
 .btn:is(.outline, .ghost) {
-  --ui-hover-bg: var(--surface-subtle);
+  --ui-hover-bg: transparent;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .btn:not(:where(.soft, .outline, .ghost, .link)) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
+  .btn {
+    --btn-default-hover-bg: color-mix(in oklch, var(--btn-bg) 88%, black);
   }
 
   .btn.soft {
@@ -1161,19 +1211,16 @@ small {
     );
   }
 
-  .btn.outline {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
-  }
-
+  .btn.outline,
   .btn.ghost {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--text)) 8%, transparent);
+    --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent);
   }
 }
 
 /* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is set locally above;
    the overlay darkening for solid/soft is .btn-specific. */
 .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--btn-bg));
+  background: var(--ui-hover-bg, var(--btn-default-hover-bg));
   box-shadow: inset 0 0 0 999px var(--btn-hover-overlay);
 }
 
@@ -1183,7 +1230,7 @@ small {
 
 .btn.link {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
+  --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
   --btn-radius: var(--radius-sm);
   --btn-border-block-end-color: transparent;
@@ -1191,6 +1238,8 @@ small {
 
   min-block-size: auto;
   padding-inline: 0;
+  inline-size: fit-content;
+  max-inline-size: 100%;
   border-color: transparent;
   text-decoration: underline;
   text-underline-offset: 0.18em;
@@ -1201,7 +1250,6 @@ small {
 
 .btn.link:not(:where(:disabled, [aria-disabled="true"])):hover {
   background: transparent;
-  color: var(--intent, var(--text));
   text-decoration-thickness: 0.12em;
 }
 
@@ -1302,6 +1350,10 @@ a.btn[aria-disabled="true"] {
  * --badge-radius
  *
  * Internal:
+ * --badge-default-bg
+ * --badge-default-fg
+ * --badge-default-border
+ * --badge-default-hover-bg
  * --badge-bg
  * --badge-fg
  * --badge-border
@@ -1322,9 +1374,13 @@ a.btn[aria-disabled="true"] {
   --badge-pad-x: 0.55em;
   --badge-font-size: 0.8125rem;
   --badge-dot-size: 0.5rem;
-  --badge-bg: var(--ui-bg, var(--surface-subtle));
-  --badge-fg: var(--ui-fg, var(--intent, var(--text)));
-  --badge-border: var(--ui-border, var(--border));
+  --badge-default-bg: var(--surface-subtle);
+  --badge-default-fg: var(--intent, var(--text));
+  --badge-default-border: var(--border);
+  --badge-default-hover-bg: var(--badge-bg);
+  --badge-bg: var(--ui-bg, var(--badge-default-bg));
+  --badge-fg: var(--ui-fg, var(--badge-default-fg));
+  --badge-border: var(--ui-border, var(--badge-default-border));
   --badge-radius: var(--radius-full);
 
   display: inline-flex;
@@ -1351,18 +1407,17 @@ a.btn[aria-disabled="true"] {
     box-shadow var(--duration);
 }
 
-/* Soft by default — duplicated here with @sync markers for check-sync.js
-   to guard, the same way alert.css guards its own soft recipe. */
+/* Soft by default. Local defaults remain behind --ui-* in the resolution
+   chain, so explicit shared treatments compose without selector exclusions. */
 @supports (color: color-mix(in oklch, red, white)) {
-  .badge:where(:not(.solid, .outline)) {
+  .badge {
     /* @sync soft-recipe */
-    --badge-bg: color-mix(
+    --badge-default-bg: color-mix(
       in oklch,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
-    --badge-fg: var(--intent, var(--text));
-    --badge-border: color-mix(
+    --badge-default-border: color-mix(
       in oklch,
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
@@ -1408,7 +1463,7 @@ a.btn[aria-disabled="true"] {
 /* Hover recipes — sets --ui-hover-bg consumed by the hover rule below.
    Declared outside :hover like button.css for the same reason. */
 :is(a.badge, button.badge).outline {
-  --ui-hover-bg: var(--surface-subtle);
+  --ui-hover-bg: transparent;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
@@ -1417,7 +1472,7 @@ a.btn[aria-disabled="true"] {
   }
 
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
-    --ui-hover-bg: color-mix(
+    --badge-default-hover-bg: color-mix(
       in oklch,
       var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
       var(--intent, var(--neutral))
@@ -1425,12 +1480,12 @@ a.btn[aria-disabled="true"] {
   }
 
   :is(a.badge, button.badge).outline {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
+    --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent);
   }
 }
 
 :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--badge-bg));
+  background: var(--ui-hover-bg, var(--badge-default-hover-bg));
 }
 
 :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
@@ -1491,8 +1546,12 @@ a.badge[aria-disabled="true"] {
  * --alert-radius
  * --alert-icon-size
  * --alert-dismiss-size
+ * --alert-border-inline-start-color
+ * --alert-border-inline-start-width
  *
  * Internal:
+ * --alert-default-bg
+ * --alert-default-border
  * --alert-bg
  * --alert-fg
  * --alert-border
@@ -1513,9 +1572,11 @@ a.badge[aria-disabled="true"] {
   --alert-pad-inline: var(--space-40);
   --alert-font-size: var(--font-size-md);
   --alert-icon-size: 1.25rem;
-  --alert-bg: var(--ui-bg, var(--surface-subtle));
+  --alert-default-bg: var(--surface-subtle);
+  --alert-default-border: var(--border);
+  --alert-bg: var(--ui-bg, var(--alert-default-bg));
   --alert-fg: var(--ui-fg, var(--intent, var(--text)));
-  --alert-border: var(--ui-border, var(--border));
+  --alert-border: var(--ui-border, var(--alert-default-border));
 
   padding-block: var(--alert-pad-block);
   padding-inline: var(--alert-pad-inline);
@@ -1540,13 +1601,17 @@ a.badge[aria-disabled="true"] {
   margin-block-end: 0;
 }
 
-/* Alerts are soft by default. .solid and .outline need no local rules — the
-   shared variant plumbing in variants.css sets --ui-* that alert consumes. */
+/* Alerts are soft by default. The recipe writes local defaults rather than
+   --ui-* so an explicit shared treatment always wins without exclusions. */
 @supports (color: color-mix(in oklch, red, white)) {
-  .alert:where(:not(.solid, .outline, .callout)) {
+  .alert {
     /* @sync soft-recipe */
-    --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
-    --ui-border: color-mix(
+    --alert-default-bg: color-mix(
+      in oklch,
+      var(--surface) var(--soft-bg-mix),
+      var(--intent, var(--neutral))
+    );
+    --alert-default-border: color-mix(
       in oklch,
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
@@ -1769,6 +1834,8 @@ a.badge[aria-disabled="true"] {
  * edge children inherit the card corners. .bleed must be a direct child.
  *
  * Internal:
+ * --card-bg
+ * --card-fg
  * --heading
  * --busy-overlay-bg
  */
@@ -1784,11 +1851,17 @@ a.badge[aria-disabled="true"] {
   --card-pad: var(--space-40);
   --card-radius: var(--radius-lg);
   --card-max-inline-size: none;
+  --card-bg: var(--ui-bg, var(--surface-raised));
+  --card-fg: var(--ui-fg, var(--text));
+
+  /* Keep contextual descendants tied to the surface this card actually owns. */
+  --heading: var(--card-fg);
+  --busy-overlay-bg: var(--card-bg);
 
   max-inline-size: var(--card-max-inline-size);
   padding: var(--card-pad);
-  background: var(--ui-bg, var(--surface-raised));
-  color: var(--ui-fg, var(--text));
+  background: var(--card-bg);
+  color: var(--card-fg);
   border: var(--border-width) solid var(--ui-border, var(--border));
   border-radius: var(--card-radius);
 }
@@ -3491,6 +3564,9 @@ a.avatar[aria-disabled="true"] {
  * Base form is unstyled chrome that takes its surrounding color. Add .pill for
  * the bordered rounded shape, and combine with an intent class (.primary,
  * .success, etc.) to tint the text, border, and background.
+ *
+ * Public hooks:
+ * --overline-radius
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -3499,7 +3575,6 @@ a.avatar[aria-disabled="true"] {
 }
 
 .overline {
-  align-self: flex-start;
   color: var(--text-muted);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
@@ -3508,14 +3583,18 @@ a.avatar[aria-disabled="true"] {
 }
 
 .overline.pill {
+  --overline-radius: var(--radius-full);
+
   display: inline-flex;
   align-items: center;
   gap: 0.5em;
   padding-inline: 0.6em;
   padding-block: 0.25em;
+  inline-size: fit-content;
+  max-inline-size: 100%;
   color: var(--intent, var(--text-muted));
   border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-full);
+  border-radius: var(--overline-radius);
   background: var(--surface);
 }
 
@@ -3540,6 +3619,14 @@ a.avatar[aria-disabled="true"] {
  * Internal:
  * --gap (local value for the shared gap token)
  */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.navbar) {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
 .navbar {
   display: flex;
   flex-wrap: wrap;
@@ -3548,17 +3635,17 @@ a.avatar[aria-disabled="true"] {
   gap: var(--gap);
   padding-block: var(--space-30);
   padding-inline: var(--space-40);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--ui-border, var(--border));
   border-radius: var(--radius-lg);
-  background: var(--surface-raised);
-  color: var(--text);
+  background: var(--ui-bg, var(--surface-raised));
+  color: var(--ui-fg, var(--text));
 }
 
 .navbar-brand {
   display: inline-flex;
   align-items: center;
   gap: var(--space-20);
-  color: var(--text);
+  color: var(--ui-fg, var(--text));
   font-weight: var(--font-weight-bold);
   text-decoration: none;
 }
@@ -3583,7 +3670,7 @@ a.avatar[aria-disabled="true"] {
   min-block-size: var(--control-size-sm);
   padding-inline: var(--space-20);
   border-radius: var(--radius);
-  color: var(--text-muted);
+  color: var(--ui-fg, var(--text-muted));
   font-weight: var(--font-weight-medium);
   text-decoration: none;
 }
@@ -4052,6 +4139,8 @@ a.avatar[aria-disabled="true"] {
  * --control-bg
  * --control-fg
  * --control-cursor
+ * --control-border-block-end-color
+ * --control-border-block-end-width
  */
 .input,
 .textarea,