actual-css 0.6.0 → 0.8.0

package/dist/actual.full.css

@@ -74,9 +74,9 @@ select {
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
-  --font-weight: 400;
+  --font-weight-normal: 400;
   --font-weight-medium: 500;
-  --font-weight-strong: 650;
+  --font-weight-semibold: 600;
   --font-weight-bold: 700;
 
   /* Typography scale */
@@ -91,7 +91,6 @@ select {
      applications, and no future framework step can collide with them. */
   --gap: 0.75rem;
   --density-space: var(--space-40);
-  --density-compact-size: 1.5rem;
   --space-10: 0.25rem;
   --space-20: 0.5rem;
   --space-30: 0.75rem;
@@ -117,7 +116,10 @@ select {
      beyond this vocabulary. Toggles that share one transition list at
      --duration-fast (flyout, tooltip) and pure-opacity backdrops stay on
      `ease`: at 100ms the curve has almost no resolving time, and a scrim is
-     not traveling anywhere. */
+     not traveling anywhere. Animation policy: reset.css is the global safety
+     net; every meaningful @keyframes is explicitly gated behind
+     prefers-reduced-motion: no-preference; ordinary transitions rely on the
+     reset alone. */
   --duration: 150ms;
   --duration-fast: 100ms;
   --duration-slow: 200ms;
@@ -148,20 +150,29 @@ select {
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .sm/.lg (variants.css) switch --control-size; --control-font-size stays
-     at its baseline because density does not change typography.
+     .compact/.spacious (variants.css) switch geometry 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
      --choice-control-size instead of --control-size. Being an em value in
      :root is deliberate — an unregistered custom property resolves its units
      at the element that consumes it, so one declaration tracks whatever font
-     size the choice actually renders at. */
+     size the choice actually renders at.
+
+     --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. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: 1em;
+  --control-pad-x: var(--font-size-md);
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
@@ -194,7 +205,10 @@ select {
   --soft-hover-alpha: 12%;
   /* Soft foreground: the share of raw intent in soft text. 100% keeps the
      pure intent color; lower values rebate it toward --text, which vivid or
-     light intent palettes need to stay legible on their own soft surface. */
+     light intent palettes need to stay legible on their own soft surface.
+     The default palette ships per-role --*-soft-fg hooks calibrated against
+     the hovered soft fill instead (theme.css); this mix is the fallback a
+     theme without hooks falls back to. */
   --soft-fg-mix: 100%;
 
   /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
@@ -210,13 +224,14 @@ select {
   --viewport-block: 100vh;
   --viewport-inline: 100vw;
 
-  /* Z-index scale — used ONLY by non-dialog overlays (see the layering
-     note below for the full model). Actual CSS reserves multiples of 10 for
-     framework layers; applications may use intermediate values for local
-     layering. */
+  /* Z-index scale — orders document-layer components only. Native top-layer
+     elements, dialogs and popovers alike, do not participate in this ordering:
+     they always paint above the document, and their order among themselves is
+     their top-layer promotion order. No z-index value here can reach them.
+     Actual CSS reserves multiples of 10 for framework layers; applications may
+     use intermediate values for local layering. */
   --z-sticky: 10;
   --z-menu: 20;
-  --z-tooltip: 50;
   --z-status: 60;
 }
 
@@ -251,7 +266,12 @@ select {
     --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
   }
 
-  :root {
+  /* Theme-derived like the shadows above, so it is declared on the same
+     boundaries: an alias resolved only on :root is inherited already composed,
+     and a [data-theme] island overriding --backdrop-color or
+     --backdrop-opacity would not change the scrim of a dialog inside it. */
+  :root,
+  [data-theme] {
     --backdrop-fill: color-mix(
       in oklch,
       var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),
@@ -363,6 +383,33 @@ select {
   --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
+/* Soft foreground hooks — the soft ink is the intent rebated toward the local
+   text so it keeps 4.5:1 against the soft hover fill (the resting fill carries
+   the extra margin; variants.css soft recipe). Deliberately scoped to the
+   default theme: a custom property bakes its var() references where it is
+   declared, so these resolve against root/light/dark tokens on every boundary.
+   Presets and custom islands keep their --soft-fg-mix / raw-intent ink unless
+   they declare hooks themselves — :where() keeps this reset from outranking a
+   theme's own declaration (e.g. brutalist's 45% soft-fg-mix). */
+:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
+  --primary-soft-fg: initial;
+  --secondary-soft-fg: initial;
+  --success-soft-fg: initial;
+  --warning-soft-fg: initial;
+  --danger-soft-fg: initial;
+  --neutral-soft-fg: initial;
+}
+
+:root,
+[data-theme="light"],
+[data-theme="dark"] {
+  --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
+  --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%);
+  --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%);
+  --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%);
+  --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
+}
+
 /* Native platform controls (checkbox, radio, range, progress) that are not
    restyled by a component class still follow the theme accent. Declared on
    every island: accent-color inherits as a computed value, so islands must
@@ -471,6 +518,7 @@ select {
  *
  * Public hooks:
  * --link
+ * --hr-space
  */
 
 body {
@@ -512,10 +560,23 @@ hgroup > * {
   margin-block: 0;
 }
 
+/* Section break.
+
+   margin-inline: 0 overrides the UA's `margin: 0.5em auto`. In block flow the
+   auto margins resolve to zero and nothing changes, but as a flex or grid item
+   an inline auto margin replaces the stretch — an <hr> in a .stack computed to
+   width 0 and vanished. .stack deliberately leaves the inline axis free, so
+   the reset belongs here.
+
+   --hr-space tunes the block rhythm on the instance: a rule closing a page
+   section and a rule separating two rows in a panel are the same element at
+   very different scales. It applies to an hr in document flow; inside .stack
+   or .prose the parent owns the spacing between siblings and wins. */
 hr {
   border: 0;
   border-block-start: var(--border-width) solid var(--border);
-  margin-block: var(--space-60);
+  margin-block: var(--hr-space, var(--space-60));
+  margin-inline: 0;
 }
 
 code,
@@ -525,6 +586,14 @@ pre {
   font-family: var(--font-mono);
 }
 
+/* Overflow containment only. One unbreakable line — a URL, a minified token, a
+   wide ASCII table — otherwise widens the whole page, and an author cannot see
+   it coming from the markup. Background, padding and radius stay out: those
+   belong to .prose or to an application code-block component. */
+pre {
+  overflow-x: auto;
+}
+
 small {
   font-size: 0.875em;
 }
@@ -536,36 +605,47 @@ small {
 
 /*
  * Intent classes do not style elements directly.
- * They only expose --intent and --intent-fg.
- * Components and variants decide how to consume them. Each component that
- * consumes --intent or --ui-* opens a local intent boundary in a :where()
- * block that resets exactly the tokens it consumes to initial. Parent intents
- * do not leak into nested components. Local intent classes (.primary, .danger,
- * etc.) still apply because they have higher specificity than :where().
+ * They only expose --intent, --intent-fg, and the optional per-intent soft
+ * foreground --intent-soft-fg, relayed from the per-role --*-soft-fg hooks.
+ * The default theme declares those hooks for its soft ink (see theme.css);
+ * a theme without them lets the relay resolve to an invalid value, so the soft
+ * recipe falls back to its --soft-fg-mix derivation and a theme opts in one
+ * role at a time (docs/pages/foundations/tokens.md). Components and variants
+ * decide how to consume them. Each component that consumes --intent,
+ * --intent-soft-fg or --ui-* opens a local intent boundary in a :where() block
+ * that resets exactly the tokens it consumes to initial. Parent intents do not
+ * leak into nested components. Local intent classes (.primary, .danger, etc.)
+ * still apply because they have higher specificity than :where().
  */
 .primary {
   --intent: var(--primary);
   --intent-fg: var(--primary-fg);
+  --intent-soft-fg: var(--primary-soft-fg);
 }
 .secondary {
   --intent: var(--secondary);
   --intent-fg: var(--secondary-fg);
+  --intent-soft-fg: var(--secondary-soft-fg);
 }
 .success {
   --intent: var(--success);
   --intent-fg: var(--success-fg);
+  --intent-soft-fg: var(--success-soft-fg);
 }
 .warning {
   --intent: var(--warning);
   --intent-fg: var(--warning-fg);
+  --intent-soft-fg: var(--warning-soft-fg);
 }
 .danger {
   --intent: var(--danger);
   --intent-fg: var(--danger-fg);
+  --intent-soft-fg: var(--danger-soft-fg);
 }
 .neutral {
   --intent: var(--neutral);
   --intent-fg: var(--neutral-fg);
+  --intent-soft-fg: var(--neutral-soft-fg);
 }
 
 /* Paint an inherited or local intent on a simple foreground element without
@@ -591,16 +671,15 @@ small {
  *   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
- * content components keep theirs. Controls consume --control-size; non-control
- * components may consume --density-* when the density context should affect
- * their local rhythm. Compact components may consume --density-compact-size.
- * Components with bespoke sizing (spinner, avatar) define local .sm/.lg;
- * applying .sm/.lg to card, dialog, accordion, navbar, table, progress, meter
- * is a no-op. Progress and meter are deliberate: a bar keeps its inline size
- * and only changes thickness, which --bar-height expresses better than a
- * three-step scale.
+ * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
+ * only. Density never changes typography or icon size. Controls consume
+ * --control-size; non-control components may consume --density-* when the
+ * context should affect their local rhythm.
+ *
+ * .sm/.lg are local size roles, not shared measurements. Shared control
+ * participants below map both typography and geometry; components with
+ * bespoke geometry (badge, spinner, avatar, rating, key, prose) own those
+ * mappings locally. Components without an explicit mapping do not participate.
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
@@ -656,17 +735,64 @@ small {
   border-color: var(--ui-border);
 }
 
-.sm {
+.compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  --density-compact-size: 1.25rem;
 }
-.lg {
+
+.spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  --density-compact-size: 1.875rem;
+}
+
+/* Shared control scale. Wrappers are listed when their descendants form one
+   component (field, input-icon, join, pagination, tabs, flyout). A local size
+   declaration beats inherited density because it is declared on the sized
+   component itself. */
+:where(
+  .btn,
+  .input,
+  .textarea,
+  .select,
+  .color,
+  .file,
+  .field,
+  .choice,
+  .input-icon,
+  .otp,
+  .join,
+  .pagination,
+  .tabs,
+  .tab,
+  .flyout
+).sm {
+  --control-size: var(--control-size-sm);
+  --control-font-size: var(--font-size-sm);
+  --control-pad-x: var(--font-size-sm);
+}
+
+:where(
+  .btn,
+  .input,
+  .textarea,
+  .select,
+  .color,
+  .file,
+  .field,
+  .choice,
+  .input-icon,
+  .otp,
+  .join,
+  .pagination,
+  .tabs,
+  .tab,
+  .flyout
+).lg {
+  --control-size: var(--control-size-lg);
+  --control-font-size: var(--font-size-lg);
+  --control-pad-x: var(--font-size-lg);
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
@@ -680,7 +806,10 @@ small {
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --ui-fg: color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix));
+    --ui-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
+    );
     /* @sync soft-recipe */
   }
 
@@ -784,7 +913,7 @@ small {
 .prose :where(h1, h2, h3, h4, h5, h6) {
   margin-block: 1.5em 0;
   color: var(--heading, var(--text));
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--prose-heading-line-height);
 }
 
@@ -825,12 +954,12 @@ small {
   text-underline-offset: 0.18em;
 }
 
-.prose :where(a:hover) {
+.prose :where(a:hover, a:focus-visible) {
   text-decoration-thickness: 0.12em;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .prose :where(a:hover) {
+  .prose :where(a:hover, a:focus-visible) {
     color: color-mix(in oklab, var(--link, var(--primary)), var(--text) 15%);
   }
 }
@@ -848,7 +977,7 @@ small {
 /* Description lists keep document flow: a valid <dl> may pair several <dt>
    with one <dd> or the reverse, so no grid layout is imposed here. */
 .prose :where(dt) {
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .prose :where(dd) {
@@ -890,8 +1019,8 @@ small {
 }
 /* @sync key-recipe */
 
+/* Overflow containment is global on `pre` (base.css); only the box is prose's. */
 .prose :where(pre) {
-  overflow-x: auto;
   padding: 1em;
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
@@ -904,6 +1033,7 @@ small {
 }
 
 .prose :where(blockquote) {
+  margin-inline: 0;
   padding-inline-start: 1em;
   border-inline-start: var(--border-width) solid var(--border);
   color: var(--text-muted);
@@ -1007,9 +1137,10 @@ small {
 /*
  * Optional fluid typography module.
  *
- * Not imported by actual.css. Import this file manually after actual.css when
- * you need display, title, and lead sizes that scale with the viewport. Typical
- * use cases: marketing pages, landing pages, hero sections, documentation
+ * Part of the typography family (typography/index.css) and the full bundle; it
+ * is not in the minimal core, so a core-only import adds it explicitly when
+ * display, title, and lead sizes must scale with the viewport. Typical use
+ * cases: marketing pages, landing pages, hero sections, documentation
  * homepages.
  *
  * Do not use this for body text, app UI, or the default prose scale. Fluid
@@ -1134,8 +1265,8 @@ small {
    --gap is inherited, so a container that composes other primitives sets its
    own rhythm on the `gap` property, not on the token: setting --gap on a
    region re-spaces every nested stack, cluster and grid at any depth. Setting
-   the token stays correct on the element that consumes it, and .sm/.lg set it
-   deliberately so a density context reaches nested layouts. See
+   the token stays correct on the element that consumes it, and
+   .compact/.spacious set it deliberately so a density context reaches nested layouts. See
    docs/pages/layout/stack.md. */
 .stack {
   display: flex;
@@ -1297,7 +1428,7 @@ small {
     text-align: start;
   }
 
-  /* Side navigation no longer occupies the viewport's bottom safe area. */
+  /* In the side layout the FAB owns the viewport's bottom safe-area inset. */
   .app-layout > .fab {
     margin-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
   }
@@ -1410,7 +1541,7 @@ small {
  *
  * .grid is space-driven: it fits as many tracks as --grid-min allows.
  * .grid-N is count-driven: it declares a structural density of N and collapses
- * through natural divisors of N (see the subdivision block below).
+ * through natural divisors of N.
  *
  * Public hooks:
  * --grid-min
@@ -1421,22 +1552,15 @@ small {
  *
  * Child contract: each direct child is a grid item placed in the tracks the
  * recipe generates.
+ *
+ * Choosing between these and the other layout primitives:
+ * docs/pages/layout/grid.md. Why divisors, why a *named* container, and how
+ * the thresholds were arrived at: docs/design-notes/grid.md.
  */
 
-/* --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 for content + aside layouts; reserve
-   --grid-columns for exact custom track templates. */
-
-/* Recipe:
-   - collection whose item width is the contract -> .grid, tune --grid-min
-   - collection whose column density is the contract -> .grid-2/3/4/6
-   - balanced subdivision of that density -> place it inside any size query
-     container (.container-query is the convenience helper for that context)
-   - peer regions that switch as a group -> .switcher
-   - content + aside -> .sidebar-layout
-   - exact custom track templates -> --grid-columns with an explicit collapse
-     rule of your own */
+/* --grid-columns replaces the intrinsic auto-fit template: once set, the grid
+   no longer collapses on its own and the author owns narrow-container
+   collapse. */
 .grid {
   display: grid;
   gap: var(--gap);
@@ -1446,16 +1570,14 @@ small {
     );
 }
 
-/* Structural density presets. The baseline is an auto-fill grid bounded at N
-   tracks: responsive and overflow-safe on its own, so a preset used without a
-   query container is never a trap — it simply reaches its balanced states less
-   precisely. auto-fill rather than auto-fit keeps item width stable when a
-   partial final page holds fewer items than the grid's capacity.
+/* Baseline: auto-fill bounded at N, so a preset is responsive and
+   overflow-safe with no wrapper at all. auto-fill rather than auto-fit keeps
+   item width stable when a partial final page holds fewer items than the
+   grid's capacity.
 
-   --grid-min is deliberately NOT read here. The subdivision below runs on
-   @container thresholds, which cannot resolve a custom property, so a hook
-   honored in the baseline would fall silent the moment a query container is
-   added. Item width is .grid's contract; column density is .grid-N's. */
+   --grid-min is deliberately NOT read here: @container thresholds cannot
+   resolve a custom property, so a hook honored in the baseline would fall
+   silent the moment a query container is added. */
 :where(.grid-2, .grid-3, .grid-4, .grid-6) {
   display: grid;
   gap: var(--gap);
@@ -1484,80 +1606,63 @@ small {
   --grid-count: 6;
 }
 
-/* Grid items keep an automatic minimum inline size (min-content), which can
-   overflow a track sized minmax(0, 1fr). Layout primitives remove that
-   intrinsic floor so their overflow-safe track sizing holds; authors only
-   need .min-inline-size-0 outside primitives that do not already remove this
-   floor. */
+/* Grid items keep an automatic min-content floor that can overflow a
+   minmax(0, 1fr) track. Layout primitives remove it so their overflow-safe
+   track sizing holds; .min-inline-size-0 is for the ones that do not. */
 :where(.grid, .grid-2, .grid-3, .grid-4, .grid-6) > * {
   min-inline-size: 0;
 }
 
-/* Balanced subdivision, activated by an ancestor container named actual-container.
- * A .grid-N inside such a container enters only divisor states of N. The name
- * is deliberate: a grid must not key off the nearest anonymous query container,
- * or a region that sets container-type: inline-size for an unrelated reason
- * would silently change the grid. The author opts the grid in by naming the
- * context — .container-query is the official helper, or declare
- * container: actual-container / inline-size on your own region.
+/* Balanced subdivision, keyed on an ancestor container *named*
+ * actual-container — never an anonymous one, so a region that sets
+ * container-type: inline-size for an unrelated reason cannot change a grid.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
  *   .grid-4   4 -> 2 -> 1
  *   .grid-6   6 -> 3 -> 2 -> 1
  *
- * Every state is a divisor of N, so all items keep the same width and no
- * state produces a visibly uneven split such as 5 + 1 or 4 + 2. Intermediate
- * counts are skipped on purpose: do not "complete" these chains with the
- * missing integers, and do not replace them with an unbounded auto-fit.
- *
- * The query container must be an ancestor. An element cannot query its own
- * size without taking inline-size containment, which destroys its intrinsic
- * inline contribution and collapses it inside .cluster, .topbar, floats, and
- * any shrink-to-fit box. See docs/design-notes/grid.md.
- *
- * Without an actual-container ancestor none of these @container rules resolve, so
- * the auto-fill baseline above stays. The min-width: 0 rule is the lowest
- * step: it pins the grid to one column inside a container before any larger
- * threshold fires (a bare grid would otherwise show a 2 + 1 orphan at 28-48rem).
- *
- * Three shared thresholds, not one calibrated per preset: 28rem opens the
- * first horizontal density, 48rem opens three columns, 64rem opens the dense
- * 4 and 6. N already carries the author's statement about item size, so
- * tuning every step to land the same item width would erase that signal —
- * .grid-6 at 64rem gives ~161px per tile, which is the point of choosing it.
- * Probed with the content each preset targets: large cards for .grid-2 down
- * to stats, avatars, and thumbnails for .grid-6.
+ * Every state is a divisor of N. Do not complete these chains with the
+ * missing integers and do not replace them with an unbounded auto-fit: both
+ * bring back uneven splits such as 5 + 1.
+ *
+ * The container must be an ANCESTOR. An element cannot query its own size
+ * without inline-size containment, which destroys its intrinsic inline
+ * contribution and collapses it inside .cluster, .topbar, floats and any
+ * shrink-to-fit box.
+ *
+ * With no such ancestor none of these resolve and the baseline above stays.
+ * min-width: 0 is the lowest step: it pins the grid to one column before any
+ * larger threshold fires, which a bare grid would otherwise show as a 2 + 1
+ * orphan between 28 and 48rem.
  *
  * Ascending min-width only: the last matching step wins by cascade order.
  */
-@supports (container-type: inline-size) {
-  @container actual-container (min-width: 0px) {
-    :where(.grid-2, .grid-3, .grid-4, .grid-6) {
-      grid-template-columns: 1fr;
-    }
+@container actual-container (min-width: 0px) {
+  :where(.grid-2, .grid-3, .grid-4, .grid-6) {
+    grid-template-columns: 1fr;
   }
+}
 
-  @container actual-container (min-width: 28rem) {
-    :where(.grid-2, .grid-4, .grid-6) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+@container actual-container (min-width: 28rem) {
+  :where(.grid-2, .grid-4, .grid-6) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
 
-  @container actual-container (min-width: 48rem) {
-    :where(.grid-3, .grid-6) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
+@container actual-container (min-width: 48rem) {
+  :where(.grid-3, .grid-6) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+}
 
-  @container actual-container (min-width: 64rem) {
-    :where(.grid-4) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
+@container actual-container (min-width: 64rem) {
+  :where(.grid-4) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 
-    :where(.grid-6) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
+  :where(.grid-6) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
 
@@ -1716,10 +1821,9 @@ small {
  * the light/dark adaptation that color-scheme already gives for free, and the
  * two never match anyway.
  *
- * Above the capability floor: scrollbar-color lands in Chromium 121 and
- * Safari 18.2, the floor is Chromium 99 / Safari 15.4. Older engines ignore
- * both declarations and draw their native scrollbar — the intended fallback,
- * not a broken state.
+ * Above every tier: scrollbar-color lands in Chromium 121 and Safari 18.2, so
+ * even a Recommended engine may lack it. Engines that ignore both declarations
+ * draw their native scrollbar — the intended fallback, not a broken state.
  *
  * Styles the scrollbar only; it does not create the overflow. Pair it with
  * .overflow-auto or a component that already scrolls.
@@ -1781,24 +1885,28 @@ small {
   .scroll-snap {
     overscroll-behavior-inline: contain;
     scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    /* x then inline: an engine that lacks the logical keyword keeps x.
+       proximity is the default, so a short rail cannot trap the pointer. */
+    scroll-snap-type: x proximity;
+    scroll-snap-type: inline proximity;
+  }
+
+  /* Strict snapping is opt-in; proximity keeps a rail from fighting the
+     pointer on a short strip. */
+  .scroll-snap[data-snap="mandatory"] {
     scroll-snap-type: x mandatory;
+    scroll-snap-type: inline mandatory;
   }
 
   .scroll-snap > * {
     scroll-snap-align: var(--scroll-snap-align);
   }
 
-  .scroll-snap[data-snap="center"] {
+  .scroll-snap[data-snap-align="center"] {
     --scroll-snap-align: center;
   }
 }
 
-@supports (scroll-snap-type: inline mandatory) {
-  .scroll-snap {
-    scroll-snap-type: inline mandatory;
-  }
-}
-
 .scroll-snap[data-scrollbar="hidden"] {
   scrollbar-width: none;
 }
@@ -1899,6 +2007,7 @@ small {
   display: grid;
   gap: var(--space-10);
   color: var(--text);
+  font-size: var(--control-font-size);
 }
 
 .field-group {
@@ -1912,7 +2021,7 @@ small {
 .field-label,
 .field-group > legend {
   color: var(--text);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .field-group > legend {
@@ -1923,13 +2032,13 @@ small {
 
 .field-help {
   color: var(--text-muted);
-  font-size: var(--font-size-sm);
+  font-size: 0.875em;
 }
 
 .field-error {
   display: none;
   color: var(--danger);
-  font-size: var(--font-size-sm);
+  font-size: 0.875em;
 }
 
 .required-mark {
@@ -1974,9 +2083,10 @@ small {
   --control-cursor: auto;
 
   appearance: none;
+  -webkit-appearance: none;
   inline-size: 100%;
   min-block-size: var(--control-size);
-  padding-inline: var(--space-30);
+  padding-inline: var(--control-pad-x);
   border: var(--border-width) solid var(--form-invalid-border, var(--control-border));
   border-block-end-color: var(
     --form-invalid-border,
@@ -2159,6 +2269,7 @@ small {
   background: var(--choice-bg);
   color: var(--choice-mark);
   appearance: none;
+  -webkit-appearance: none;
   cursor: pointer;
 }
 
@@ -2197,9 +2308,9 @@ small {
 
 .check:is(:checked, :indeterminate),
 .radio:checked {
-  --choice-border: var(--intent, var(--primary));
-  --choice-bg: var(--intent, var(--primary));
-  --choice-mark: var(--intent-fg, var(--primary-fg));
+  --choice-border: var(--intent, var(--state-selected));
+  --choice-bg: var(--intent, var(--state-selected));
+  --choice-mark: var(--intent-fg, var(--state-selected-fg));
 }
 
 .check:checked::before {
@@ -2218,6 +2329,8 @@ small {
   transform: scale(1);
 }
 
+/* Progressive: without :not() selector lists, the normal unchecked border
+   remains visible and the control stays usable. */
 .check:hover:not(:checked, :indeterminate, :disabled),
 .radio:hover:not(:checked, :indeterminate, :disabled) {
   --choice-border: var(--text-subtle);
@@ -2253,20 +2366,40 @@ small {
  * the CSS chevron, so the picker (appearance: base-select) enhancement in
  * custom-select.css can be opted out independently. Add .native to a specific
  * select to opt out of the enhancement.
+ *
+ * Public hooks:
+ * --select-icon-size
  */
-.select:not([multiple], [size]:not([size="1"])) {
+/* --select-icon-size is typographic (em), so the reserved slot and the
+   pictogram scale with the control's font size, not a fixed rem sliver. */
+.select:not(:is([multiple], [size]:not([size="1"]))) {
+  --select-icon-size: 1em;
+
   appearance: none;
-  padding-inline-end: calc(var(--space-30) + var(--space-60));
+  -webkit-appearance: none;
+  padding-inline-end: calc(var(--control-pad-x) * 2 + var(--select-icon-size));
   background-image: var(--icon-chevron);
-  background-position: center right var(--space-30);
-  background-size: 1rem auto;
+  background-position: center right var(--control-pad-x);
+  background-size: var(--select-icon-size) auto;
   background-repeat: no-repeat;
 }
 
 /* The chevron sits on the inline-end side; flip it in RTL so it follows
-   the padding-inline-end space reserved for it. */
-.select:not([multiple], [size]:not([size="1"])):dir(rtl) {
-  background-position: center left var(--space-30);
+   the padding-inline-end space reserved for it. Safari before 16.4 has no
+   :dir(); the ancestor-attribute path is the Degraded-tier fallback and the
+   :dir() rules are dropped on their own there. :dir() follows inherited
+   directionality, so the explicit ltr rule neutralizes an outer RTL fallback
+   for a nested direction change. */
+[dir="rtl"] .select:not(:is([multiple], [size]:not([size="1"]))) {
+  background-position: center left var(--control-pad-x);
+}
+
+.select:not(:is([multiple], [size]:not([size="1"]))):dir(ltr) {
+  background-position: center right var(--control-pad-x);
+}
+
+.select:not(:is([multiple], [size]:not([size="1"]))):dir(rtl) {
+  background-position: center left var(--control-pad-x);
 }
 
 /* Both forced-colors and prefers-contrast hand the arrow back to the
@@ -2274,10 +2407,10 @@ small {
    simpler than maintaining contrast variants, and native rendering already
    matches whatever contrast mode the user picked. */
 @media (forced-colors: active), (prefers-contrast: more) {
-  .select:not([multiple], [size]:not([size="1"])) {
+  .select:not(:is([multiple], [size]:not([size="1"]))) {
     appearance: auto;
     background-image: none;
-    padding-inline-end: var(--space-30);
+    padding-inline-end: var(--control-pad-x);
   }
 }
 
@@ -2291,18 +2424,23 @@ small {
  */
 .file {
   color: var(--text-muted);
+  font-size: var(--control-font-size);
 }
 
 .file::file-selector-button {
   margin-inline-end: var(--space-30);
+  /* Consume the shared control scale like .btn, so .sm/.lg and density resize
+     the whole control, not just the filename text. */
+  min-block-size: var(--control-size);
   padding-block: var(--space-10);
+  padding-block: max(var(--space-10), calc((var(--control-size) - 1lh) / 2));
   padding-inline: var(--space-20);
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-sm);
   background: var(--surface-subtle);
   color: var(--text);
   font: inherit;
-  font-size: var(--font-size-sm);
+  font-size: var(--control-font-size);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   transition:
@@ -2529,18 +2667,19 @@ small {
  * Input Icon — decorative icon inside a relative wrapper, leading or trailing.
  *
  * Icon-library agnostic: detects position by DOM order. First child that is
- * not .input = leading icon; icon after .input = trailing. The icon keeps a
- * fixed size; density contexts shrink the control geometry around it, not
- * the pictogram.
+ * not .input = leading icon; icon after .input = trailing. The icon follows
+ * local typography; density contexts shrink the control geometry around it
+ * without changing the pictogram.
  *
  * Public hooks:
  * --input-icon-size
  */
 .input-icon {
-  --input-icon-size: 1.25rem;
+  --input-icon-size: 1.25em;
 
   display: block;
   position: relative;
+  font-size: var(--control-font-size);
 }
 
 /* Icon — shared by leading and trailing */
@@ -2555,29 +2694,34 @@ small {
 
 /* Leading: icon is the first child */
 .input-icon > :first-child:where(:not(.input)) {
-  inset-inline-start: var(--space-30);
+  inset-inline-start: var(--control-pad-x);
 }
 
-/* Trailing: input is the first child, icon follows */
-.input-icon > .input:first-child ~ :where(:not(.input)) {
-  inset-inline-end: var(--space-30);
+/* Trailing: an icon follows the input, with or without a leading icon. */
+.input-icon > .input ~ :where(:not(.input)) {
+  inset-inline-end: var(--control-pad-x);
 }
 
 /* font-size only sizes text-metric icons (webfont <i>, <span>). An inline
    <svg> with just a viewBox ignores it, so give it explicit dimensions. */
 .input-icon > svg:where(:not(.input)) {
-  inline-size: var(--input-icon-size);
-  block-size: var(--input-icon-size);
+  /* The shared rule already maps --input-icon-size onto font-size. One em is
+     therefore the requested optical size; reusing the em-valued hook here
+     would apply its factor a second time. */
+  inline-size: 1em;
+  block-size: 1em;
 }
 
 /* Leading: input gets start padding to clear the icon */
 .input-icon > :first-child:where(:not(.input)) ~ .input {
-  padding-inline-start: calc(var(--space-30) * 2 + var(--input-icon-size));
+  padding-inline-start: calc(var(--control-pad-x) * 2 + var(--input-icon-size));
 }
 
-/* Trailing: input is first child and has a sibling → end padding */
-.input-icon > .input:first-child:where(:not(:last-child)) {
-  padding-inline-end: calc(var(--space-30) * 2 + var(--input-icon-size));
+/* Trailing: the input has a following sibling → end padding. Not tied to the
+   input being first child, so a leading icon does not disable the trailing
+   icon's reserved space. */
+.input-icon > .input:where(:not(:last-child)) {
+  padding-inline-end: calc(var(--control-pad-x) * 2 + var(--input-icon-size));
 }
 
 /*
@@ -2647,6 +2791,7 @@ small {
   border-radius: var(--radius-full);
   background: var(--switch-bg);
   appearance: none;
+  -webkit-appearance: none;
   cursor: pointer;
 }
 
@@ -2667,14 +2812,17 @@ small {
     background-color var(--duration);
 }
 
-.switch:hover:not(:disabled) {
+/* Hover is not selected: an unchecked switch keeps the brand fallback on hover,
+   so a theme that separates --primary from --state-selected never tints an
+   OFF control with the selection accent before it is checked. */
+.switch:not(:checked):hover:not(:disabled) {
   --switch-border: var(--intent, var(--primary));
 }
 
 .switch:checked {
-  --switch-bg: var(--intent, var(--primary));
-  --switch-border: var(--intent, var(--primary));
-  --switch-knob: var(--intent-fg, var(--primary-fg));
+  --switch-bg: var(--intent, var(--state-selected));
+  --switch-border: var(--intent, var(--state-selected));
+  --switch-knob: var(--intent-fg, var(--state-selected-fg));
 }
 
 .switch:checked::before {
@@ -2682,7 +2830,17 @@ small {
 }
 
 /* The knob travels toward inline-end; in RTL that is leftward, so the
-    translateX sign flips. translateX is physical, not logical. */
+    translateX sign flips. translateX is physical, not logical. Safari before
+    16.4 has no :dir(); the ancestor-attribute path is the Degraded-tier
+    fallback and the :dir() rules are dropped on their own there. */
+[dir="rtl"] .switch:checked::before {
+  transform: translateX(calc(var(--switch-travel) * -1));
+}
+
+.switch:checked:dir(ltr)::before {
+  transform: translateX(var(--switch-travel));
+}
+
 .switch:checked:dir(rtl)::before {
   transform: translateX(calc(var(--switch-travel) * -1));
 }
@@ -2739,6 +2897,7 @@ small {
   --range-track-bg: var(--border);
 
   appearance: none;
+  -webkit-appearance: none;
   inline-size: 100%;
   block-size: var(--range-thumb-size);
   background: transparent;
@@ -2759,6 +2918,7 @@ small {
 
 .range::-webkit-slider-thumb {
   appearance: none;
+  -webkit-appearance: none;
   inline-size: var(--range-thumb-size);
   block-size: var(--range-thumb-size);
   border-radius: var(--radius-full);
@@ -2906,13 +3066,13 @@ small {
 
 /* Checked border — shared by radio and checkbox */
 .choice-card:has(:checked) {
-  --choice-card-border: var(--intent, var(--primary));
+  --choice-card-border: var(--intent, var(--state-selected));
 }
 
 /* Subtle background tint on checked — modern browsers only */
 @supports (color: color-mix(in oklch, red, white)) {
   .choice-card:has(:checked) {
-    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--primary)));
+    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--state-selected)));
   }
 }
 
@@ -2932,7 +3092,7 @@ small {
 
 /* Badge disc — circle for radio, rounded square for checkbox */
 .choice-card::before {
-  background: var(--intent, var(--primary));
+  background: var(--intent, var(--state-selected));
   box-shadow: 0 0 0 2px var(--surface);
   z-index: 1;
 }
@@ -2947,7 +3107,7 @@ small {
 
 /* Check mark */
 .choice-card::after {
-  background: var(--intent-fg, var(--primary-fg));
+  background: var(--intent-fg, var(--state-selected-fg));
   -webkit-mask: var(--icon-check) center / 60% no-repeat;
   mask: var(--icon-check) center / 60% no-repeat;
   z-index: 2;
@@ -3084,8 +3244,8 @@ small {
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
- * Density flows through --control-size: .sm/.lg shrink the control geometry
- * and the reserved headroom with it, leaving typography untouched.
+ * Density flows through --control-size: .compact/.spacious change the control
+ * geometry and the reserved headroom with it, leaving typography untouched.
  *
  * Public hooks:
  * --floating-label-top
@@ -3116,7 +3276,7 @@ small {
   inset-inline-start: calc(var(--space-30) + var(--border-width));
   color: var(--text-muted);
   font-size: var(--control-font-size);
-  font-weight: var(--font-weight);
+  font-weight: var(--font-weight-normal);
   opacity: var(--floating-label-opacity);
   pointer-events: none;
   transition:
@@ -3196,7 +3356,7 @@ small {
 .otp {
   --otp-cell-size: var(--control-size);
   --otp-gap: var(--space-10);
-  --otp-font-size: 1.5rem;
+  --otp-font-size: 1.5em;
   --otp-cell-border: var(--border);
   --otp-cell-bg: var(--surface);
   --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px);
@@ -3209,6 +3369,7 @@ small {
   max-inline-size: 100%;
   gap: var(--otp-gap);
   border-radius: var(--radius);
+  font-size: var(--control-font-size);
   /* Unlike hidden, clip cannot become a scroll container when the caret moves
      into the input extension. */
   overflow: clip;
@@ -3250,6 +3411,7 @@ small {
   letter-spacing: calc(var(--otp-cell-size) + var(--otp-gap) - 1ch);
   text-align: start;
   appearance: none;
+  -webkit-appearance: none;
 }
 
 /* Deliberately no group ring: a box around all the cells reads as a second
@@ -3284,6 +3446,12 @@ small {
   cursor: not-allowed;
 }
 
+/* biome-ignore lint/style/noDescendingSpecificity: disabled must come last of
+   the cell states, and the reorder the rule asks for would invert that. A
+   disabled input is barred from constraint validation, so `:invalid` and
+   `:focus` cannot reach it at all; the only overlap left is an authored
+   aria-invalid, where equal specificity and source order are what make
+   disabled — not danger — the colour a dead field reads as. */
 .otp > input:disabled ~ span {
   --otp-cell-bg: var(--surface-subtle);
   --otp-cell-border: var(--state-disabled);
@@ -3343,6 +3511,7 @@ small {
 :where(.btn) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -3414,13 +3583,16 @@ small {
   --ui-border: transparent;
 }
 
-/* Solid/soft get the overlay darkening on hover; outline/ghost/link stay flat.
-   Routed through a variable instead of a :not(.outline, .ghost, .link)
-   exclusion so the hover rule below only has to state the interactive
-   element list once. */
+/* Solid keeps the overlay darkening on hover; soft/outline/ghost/link stay
+   flat. The soft hover is its own fill change (--soft-hover-alpha) — a second
+   overlay on top would double the fill step and drag its ink below the resting
+   contrast on every intent. Routed through a variable instead of a
+   :not(.outline, .ghost, .link) exclusion so the hover rule below only has to
+   state the interactive element list once. */
 .btn.outline,
 .btn.ghost,
-.btn.link {
+.btn.link,
+.btn.soft {
   --btn-hover-overlay: transparent;
 }
 
@@ -3544,17 +3716,6 @@ a.btn[aria-disabled="true"] {
   }
 }
 
-@media print {
-  :is(button, input[type="button"], input[type="submit"], input[type="reset"]).btn {
-    display: none !important;
-  }
-
-  a.btn[href^="http"]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.875em;
-  }
-}
-
 /*
  * Badges for compact labels, counts, and state hints.
  *
@@ -3566,8 +3727,10 @@ a.btn[aria-disabled="true"] {
  * --badge-size
  * --badge-pad-x
  * --badge-font-size
+ * --badge-icon-size
  * --badge-dot-size
  * --badge-radius
+ * --badge-dismiss-icon-size
  *
  * Internal:
  * --badge-default-bg
@@ -3583,6 +3746,7 @@ a.btn[aria-disabled="true"] {
 :where(.badge) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -3590,10 +3754,14 @@ a.btn[aria-disabled="true"] {
 }
 
 .badge {
-  --badge-size: var(--density-compact-size);
-  --badge-pad-x: 0.55em;
-  --badge-font-size: var(--font-size-xs);
+  --badge-size: 1.5rem;
+  /* A third of the height keeps the pill proportional across local sizes
+     without coupling it to the label typography. */
+  --badge-pad-x: calc(var(--badge-size) / 3);
+  --badge-font-size: var(--font-size-sm);
+  --badge-icon-size: 1em;
   --badge-dot-size: 0.5rem;
+  --badge-dismiss-icon-size: 0.875em;
   --badge-default-bg: var(--surface-subtle);
   --badge-default-fg: var(--intent, var(--text));
   --badge-default-border: var(--border);
@@ -3606,7 +3774,11 @@ a.btn[aria-disabled="true"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
   gap: 0.35em;
+  /* Content-sized: a flex parent must not squeeze the pill and push its
+     nowrap label outside the background. */
+  flex: none;
   inline-size: fit-content;
   max-inline-size: 100%;
   min-block-size: var(--badge-size);
@@ -3616,7 +3788,7 @@ a.btn[aria-disabled="true"] {
   background: var(--badge-bg);
   color: var(--badge-fg);
   font-size: var(--badge-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
   text-decoration: none;
   white-space: nowrap;
@@ -3627,6 +3799,31 @@ a.btn[aria-disabled="true"] {
     box-shadow var(--duration);
 }
 
+.badge.sm {
+  --badge-size: 1.25rem;
+  --badge-font-size: var(--font-size-xs);
+  --badge-dot-size: 0.375rem;
+}
+
+.badge.lg {
+  --badge-size: 1.875rem;
+  --badge-font-size: var(--font-size-md);
+  --badge-dot-size: 0.625rem;
+}
+
+/* Decorative children follow the badge's optical size. Text and interactive
+   dismiss buttons retain their own boxes. */
+.badge > :where(svg, img, [aria-hidden="true"]:not(.dot)) {
+  flex: none;
+  /* The shared rule maps --badge-icon-size onto font-size. One em is therefore
+     the requested optical size; reusing the em-valued hook here would apply its
+     factor a second time. */
+  inline-size: 1em;
+  block-size: 1em;
+  font-size: var(--badge-icon-size);
+  line-height: 1;
+}
+
 /* 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)) {
@@ -3642,10 +3839,9 @@ a.btn[aria-disabled="true"] {
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --badge-default-fg: color-mix(
-      in oklab,
-      var(--text),
-      var(--intent, var(--text)) var(--soft-fg-mix)
+    --badge-default-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
     /* @sync soft-recipe */
   }
@@ -3662,12 +3858,22 @@ a.btn[aria-disabled="true"] {
   block-size: var(--badge-size);
 }
 
+/* The shared .dot separator doubles as a status dot inside a badge.
+   currentColor follows the badge's resolved ink, so the dot matches a soft
+   intent without repeating the intent class on it. */
+.badge > .dot {
+  background-color: currentColor;
+}
+
 .badge > button {
   display: inline-grid;
   place-items: center;
   flex: 0 0 auto;
-  min-inline-size: var(--density-compact-size);
-  min-block-size: var(--density-compact-size);
+  /* WCAG 2.5.8 floors pointer targets at 24 CSS px. Density and local size may
+     keep the badge visually compact through the negative margins, but never
+     shrink its action target below that literal floor. */
+  min-inline-size: max(var(--badge-size), 24px);
+  min-block-size: max(var(--badge-size), 24px);
   margin-block: -0.25rem;
   margin-inline-start: -0.15em;
   margin-inline-end: -0.45em;
@@ -3681,6 +3887,21 @@ a.btn[aria-disabled="true"] {
   cursor: pointer;
 }
 
+/* Dismiss mark — an empty dismiss button paints its own X from the shared
+   --icon-close mask, so no icon font or text glyph is required in the markup
+   (same contract as .alert-dismiss and .dialog-close). A mask box is a block
+   box, so place-items centers the ink itself; a text glyph would only center
+   its line box and land the ink low, because a lowercase x has no descender
+   and only x-height of ascent. A button with its own content keeps it. */
+.badge > button:empty::before {
+  content: "";
+  inline-size: var(--badge-dismiss-icon-size);
+  block-size: var(--badge-dismiss-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
 .badge > button:not(:disabled):hover {
   background: var(--hover-overlay);
 }
@@ -3713,7 +3934,14 @@ a.btn[aria-disabled="true"] {
   background: var(--ui-hover-bg, var(--badge-default-hover-bg));
 }
 
-:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+/* Solid and empty badges keep the overlay darkening on hover; soft badges do
+   not — their hover fill (--soft-hover-alpha) is already the state change, and
+   stacking a second darkening drags the soft ink below its resting contrast.
+   Soft here means :not(.solid, .outline, :empty), mirroring the soft hover-bg
+   recipe above. */
+:where(a.badge, button.badge):is(.solid, :empty):not(
+  :where(:disabled, [aria-disabled="true"])
+):hover {
   /* Huge inset spread paints the overlay over the pill radius (see button.css). */
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
@@ -3745,7 +3973,6 @@ a.badge[aria-disabled="true"] {
 @media print {
   .badge {
     border: var(--border-width) solid CanvasText;
-    break-inside: avoid;
   }
 }
 
@@ -3783,6 +4010,7 @@ a.badge[aria-disabled="true"] {
 :where(.alert) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -3815,12 +4043,23 @@ a.badge[aria-disabled="true"] {
   min-inline-size: 0;
 }
 
-.alert > :first-child {
-  margin-block-start: 0;
+/* The alert owns the block spacing between its direct content blocks, the way
+   .stack and .prose own theirs, so a title and a description are plain
+   siblings instead of a wrapper carrying an inline --gap. What made that pair
+   read as detached is the UA paragraph margin: trimming only the outer edges
+   left it in place between them. Content keeps its own internal rhythm — a
+   nested list keeps its bullets and padding, a .prose child keeps its flow.
+   The slots are excluded because they are anatomy, not content: an
+   admonition's title bar has to stay flush against its body. The list follows
+   the anatomy, so it grows with it. */
+.alert > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) {
+  margin-block: 0;
 }
 
-.alert > :last-child {
-  margin-block-end: 0;
+.alert
+  > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body))
+  + :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) {
+  margin-block-start: var(--space-10);
 }
 
 /* Alerts are soft by default. The recipe writes local defaults rather than
@@ -3838,10 +4077,9 @@ a.badge[aria-disabled="true"] {
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --alert-default-fg: color-mix(
-      in oklab,
-      var(--text),
-      var(--intent, var(--text)) var(--soft-fg-mix)
+    --alert-default-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
     /* @sync soft-recipe */
   }
@@ -3942,7 +4180,7 @@ a.badge[aria-disabled="true"] {
 /* Links */
 .alert :where(a:not(.btn)) {
   color: inherit;
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* Forced colors: no override needed. The always-on border gets a forced
@@ -3950,11 +4188,12 @@ a.badge[aria-disabled="true"] {
    Canvas backplate (unreadable) — so .solid intentionally falls back to the
    default look. */
 
-/* Callout — neutral surface with a thick accent border on the leading edge.
-   The thickness follows the shared --alert-border-inline-start-width hook. */
+/* Callout — leading-edge flag treatment. It owns the border geometry only, so
+   the surface and the ink stay with the alert's own intent and shared
+   treatment: bare is the soft panel, .surface the page surface, .solid a
+   filled one, and .outline has no fill and no other side. Thickness and color
+   follow the --alert-border-inline-start-* hooks. */
 .alert.callout {
-  --alert-bg: var(--surface-subtle);
-  --alert-fg: var(--text);
   border: 0;
   border-inline-start: var(--alert-border-inline-start-width, 4px) solid
     var(--alert-border-inline-start-color, var(--intent, var(--neutral)));
@@ -4079,8 +4318,15 @@ a.badge[aria-disabled="true"] {
  * --busy-overlay-bg
  */
 /* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
+   Local intent classes still win because :where() has zero specificity.
+   The intent tokens are reset alongside --ui-*: the shared variants
+   (.soft/.solid/.outline/.surface) read --intent / --intent-fg / --intent-soft-fg
+   when they paint this surface, so an ancestor intent would otherwise leak
+   through a variant that has no local intent class. */
 :where(.card) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -4153,7 +4399,7 @@ a.badge[aria-disabled="true"] {
   box-shadow: var(--shadow);
 }
 .card.subtle {
-  background: var(--surface-subtle);
+  --card-bg: var(--surface-subtle);
 }
 .card.compact {
   --card-pad: var(--space-20);
@@ -4205,56 +4451,6 @@ a.badge[aria-disabled="true"] {
   }
 }
 
-/*
- * Surface — shared modal scrim and backdrop for flyout and drawer.
- *
- * Drawn by .drawer::backdrop (native dialog top-layer) and .surface-backdrop
- * (custom fixed div for flyout sheets on coarse pointers). The native
- * .modal::backdrop uses the same fill and animates opacity from 0 to 1
- * (modal.css), so the scrim strength stays consistent across the dialog
- * family.
- *
- * .surface-backdrop, .is-sheet, and .is-open are runtime markers set by
- * surface.js. Authors opt in via [data-flyout-mobile="sheet|auto|none|anchored"]
- * — the JS resolves "auto" into .is-sheet at run time.
- */
-/* Custom backdrop for overlays that do not use the native dialog top-layer.
- * Its z-index sits just below the flyout it accompanies. */
-.surface-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: calc(var(--z-menu) - 1);
-  background: var(--backdrop-fill);
-  opacity: 1;
-  /* A scrim never travels; it fades on the neutral `ease`. Duration matches
-     the flyout sheet it accompanies so it never lags the panel. */
-  transition: opacity var(--duration-fast) ease;
-}
-
-.surface-backdrop[hidden] {
-  display: none;
-  opacity: 0;
-}
-
-@starting-style {
-  .surface-backdrop:not([hidden]) {
-    opacity: 0;
-  }
-}
-
-@supports (transition-behavior: allow-discrete) {
-  .surface-backdrop {
-    transition:
-      opacity var(--duration-fast) ease,
-      display var(--duration-fast) allow-discrete;
-  }
-}
-@media print {
-  .surface-backdrop {
-    display: none !important;
-  }
-}
-
 /*
  * Modal shell styling for native dialog elements.
  *
@@ -4269,21 +4465,40 @@ a.badge[aria-disabled="true"] {
  *
  * Internal:
  * --dialog-close-icon-size
+ * --dialog-viewport-block
+ * --dialog-viewport-gap-default
  * --dialog-viewport-gap-2x
  */
 dialog.modal {
-  --modal-size: 32rem;
-  --dialog-viewport-gap: var(--space-40);
-  /* calc() multiplication is not in the supported browser range, so the
+  /* --dialog-viewport-gap stays fallback-only for the same reason as
+     --modal-size below: declaring the public hook here would give it
+     type+class specificity that a single author class cannot outrank. The
+     responsive default lives in an internal token instead, so a media query
+     can still move it without closing the hook.
+
+     calc() multiplication is not in the supported browser range, so the
      doubled gap is spelled out with an additive calc. */
-  --dialog-viewport-gap-2x: calc(var(--dialog-viewport-gap) + var(--dialog-viewport-gap));
+  --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))
+  );
 
   /* 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;
 
-  max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size));
-  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
+  /* --modal-size stays fallback-only: declaring it on dialog.modal gives it
+     type+class specificity, which a single author class cannot outrank, so the
+     public hook would silently keep this default. Same reason choice.css never
+     declares --choice-control-offset. */
+  max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size, 32rem));
+
+  /* Stable viewport cap for the panel: dvh tracks the dynamic browser toolbar
+     and makes the dialog reflow on mobile, svh does not. App shells keep the
+     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);
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
@@ -4293,7 +4508,7 @@ dialog.modal {
   overflow: visible;
   opacity: 0;
   /*
-   * Keep the open dialog root untransformed. Fixed overlays mounted inside a
+   * Keep the open dialog root untransformed. Fixed overlays authored inside a
    * modal dialog use viewport coordinates; transform/translate/scale on this
    * element would make them position against the dialog instead. The closed
    * state can still carry a small transform for enter/exit motion. The lift
@@ -4310,16 +4525,23 @@ dialog.modal > form,
 dialog.modal > .stack {
   display: grid;
   gap: var(--space-40);
-  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
+  max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
   overflow: auto;
   overscroll-behavior: contain;
   padding: var(--space-40);
 }
 
-/* Keep the dialog off the viewport edges on small screens. */
+@supports (block-size: 100svh) {
+  dialog.modal {
+    --dialog-viewport-block: 100svh;
+  }
+}
+
+/* Keep the dialog off the viewport edges on small screens. Moves the internal
+   default, not the public hook, so an author override still wins here too. */
 @media (max-width: 30rem) {
   dialog.modal {
-    --dialog-viewport-gap: var(--space-30);
+    --dialog-viewport-gap-default: var(--space-30);
   }
 }
 
@@ -4329,8 +4551,8 @@ dialog.modal.scrollable > .stack {
   overflow: hidden;
 }
 
-dialog.modal.scrollable > form > :not(header, footer),
-dialog.modal.scrollable > .stack > :not(header, footer) {
+dialog.modal.scrollable > form > :not(:is(header, footer)),
+dialog.modal.scrollable > .stack > :not(:is(header, footer)) {
   min-block-size: 0;
   overflow: auto;
   overscroll-behavior: contain;
@@ -4385,6 +4607,7 @@ dialog.modal.dialog-confirmation > form > footer {
 :where(.dialog-icon) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
 }
@@ -4513,14 +4736,11 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
-/* Close controls. A close button is an action attached to a surface, so it
-   never participates in the content flow. The modal and the drawer share the
-   same simple placement — absolute at the panel's top inline-end, inside the
-   surface — so both close buttons look and behave identically. The glyph comes
-   from --icon-close, masked to currentColor, so no icon font or text glyph is
-   required in the markup. */
-.dialog-close,
-.drawer-close {
+/* Close control. A close button is an action attached to a surface, so it
+   never participates in the content flow — absolute at the panel's top
+   inline-end, inside the surface. The glyph comes from --icon-close, masked to
+   currentColor, so no icon font or text glyph is required in the markup. */
+.dialog-close {
   --dialog-close-icon-size: 1rem;
 
   display: inline-grid;
@@ -4544,8 +4764,7 @@ html.has-modal-open.had-scrollbar {
   background: var(--surface-subtle);
 }
 
-.dialog-close::before,
-.drawer-close::before {
+.dialog-close::before {
   content: "";
   inline-size: var(--dialog-close-icon-size);
   block-size: var(--dialog-close-icon-size);
@@ -4555,28 +4774,20 @@ html.has-modal-open.had-scrollbar {
 }
 
 @media (hover: hover) {
-  .dialog-close:hover,
-  .drawer-close:hover {
+  .dialog-close:hover {
     box-shadow: inset 0 0 0 999px var(--hover-overlay);
     color: var(--text);
   }
 }
 
-.dialog-close:active,
-.drawer-close:active {
+.dialog-close:active {
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
 
-.dialog-close:focus-visible,
-.drawer-close:focus-visible {
+.dialog-close:focus-visible {
   outline: 2px solid transparent;
   box-shadow: var(--focus-ring-shadow);
 }
-@media print {
-  dialog.modal[open] {
-    display: none !important;
-  }
-}
 
 /*
  * Drawer — modal side-sheet built on the native dialog element.
@@ -4642,8 +4853,18 @@ dialog.drawer[open] {
     transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
-/* Backdrop color sourced from components/surface.css so it matches .modal
-   and .surface-backdrop across the dialog family. */
+/* A form is the drawer's content wrapper when actions need method="dialog".
+   Span the drawer tracks so the form can keep the header at the top, let the
+   body absorb the available height, and keep the footer at the bottom. */
+dialog.drawer > form {
+  display: grid;
+  grid-row: 1 / -1;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: var(--space-40);
+  min-block-size: 100%;
+}
+
+/* The shared backdrop token keeps drawer and modal scrims consistent. */
 dialog.drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
@@ -4708,33 +4929,33 @@ dialog.drawer nav {
 }
 
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
-   path as the Minimal-tier fallback. */
+   path as the Degraded-tier fallback. The :dir() rules are dropped on their
+   own there, so they need no wrapper. :dir() follows inherited HTML
+   directionality and handles nested direction changes; the explicit ltr rules
+   neutralize an outer RTL fallback selector. Each specificity group keeps the
+   fallback before the :dir() rules. */
 [dir="rtl"] dialog.drawer {
   --drawer-closed-translate: 100%;
 }
 
-[dir="rtl"] dialog.drawer[data-side="end"] {
+dialog.drawer:dir(ltr) {
   --drawer-closed-translate: -100%;
 }
 
-/* :dir() follows inherited HTML directionality and handles nested direction
-   changes. Explicit ltr rules neutralize an outer RTL fallback selector. */
-@supports selector(:dir(rtl)) {
-  dialog.drawer:dir(ltr) {
-    --drawer-closed-translate: -100%;
-  }
+dialog.drawer:dir(rtl) {
+  --drawer-closed-translate: 100%;
+}
 
-  dialog.drawer[data-side="end"]:dir(ltr) {
-    --drawer-closed-translate: 100%;
-  }
+[dir="rtl"] dialog.drawer[data-side="end"] {
+  --drawer-closed-translate: -100%;
+}
 
-  dialog.drawer:dir(rtl) {
-    --drawer-closed-translate: 100%;
-  }
+dialog.drawer[data-side="end"]:dir(ltr) {
+  --drawer-closed-translate: 100%;
+}
 
-  dialog.drawer[data-side="end"]:dir(rtl) {
-    --drawer-closed-translate: -100%;
-  }
+dialog.drawer[data-side="end"]:dir(rtl) {
+  --drawer-closed-translate: -100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -4743,32 +4964,74 @@ dialog.drawer nav {
   }
 }
 
-/* The close button shares the modal's interior placement (modal.css): absolute
-   at the panel's top inline-end, out of the content flow. The header reserves
-   inline room so the title never runs under it. */
+/* The header reserves inline room so the title never runs under the close
+   control. */
 dialog.drawer > header,
 dialog.drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
-@media print {
-  dialog.drawer[open] {
-    display: none !important;
+
+/* Close control, owned here so a drawer-only build does not depend on
+   modal.css. Mirrors the modal's .dialog-close placement: absolute at the
+   panel's top inline-end, out of the content flow. */
+.drawer-close {
+  --drawer-close-icon-size: 1rem;
+
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  cursor: pointer;
+
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--space-20);
+  inset-inline-end: var(--space-20);
+
+  inline-size: var(--control-size);
+  block-size: var(--control-size);
+
+  background: var(--surface-subtle);
+}
+
+.drawer-close::before {
+  content: "";
+  inline-size: var(--drawer-close-icon-size);
+  block-size: var(--drawer-close-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
+@media (hover: hover) {
+  .drawer-close:hover {
+    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+    color: var(--text);
   }
 }
 
+.drawer-close:active {
+  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+}
+
+.drawer-close:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--focus-ring-shadow);
+}
+
 
 /* Overlays */
 /*
  * Flyout — floating panel for actions and links.
  *
- * JavaScript owns positioning (position: fixed + left/top), state
- * (hidden + .is-open), focus, and keyboard behavior. CSS owns the surfaced
- * panel appearance, item styles, and animation.
+ * JavaScript promotes the panel to the top layer and chooses viewport or
+ * document coordinates from its anchor. It also owns state (.is-open), focus,
+ * and keyboard behavior. CSS owns the surfaced panel appearance, item styles,
+ * and animation.
  *
- * Runtime markers (managed by surface.js): .is-open marks an open flyout,
- * .is-sheet marks "auto" resolved to bottom-sheet presentation on coarse
- * pointers. Authors opt into mobile behavior with
- * [data-flyout-mobile="sheet|auto|none|anchored"].
+ * Runtime marker (managed by surface.js): .is-open marks an open flyout.
  * --surface-anchor-width is set by surface.js while an open flyout is positioned.
  *
  * Public hooks:
@@ -4777,7 +5040,7 @@ dialog.drawer > form > header {
  *
  * Internal:
  * --menu-item-size (derived from --control-size for menu rows)
- * --available-height (measured by floating.js)
+ * --available-height (measured by the positioner)
  * --surface-anchor-width (measured by surface.js)
  */
 
@@ -4804,8 +5067,8 @@ dialog.drawer > form > header {
   --menu-item-size: var(--control-size);
   z-index: var(--z-menu);
   /* No-JS fallback: below the trigger inside the relative .flyout-trigger.
-     surface.js switches an open flyout to position: fixed with measured
-     coordinates; this only covers a flyout revealed without the runtime. */
+     surface.js replaces this with the anchor's coupled position/coordinate
+     mode; this only covers a flyout revealed without the runtime. */
   position: absolute;
   inset-block-start: calc(100% + var(--space-10));
   inset-inline-start: 0;
@@ -4833,73 +5096,63 @@ dialog.drawer > form > header {
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;
-  /* Anchored flyouts fade in and out; scaling around the center would detach
-     the anchored edge from its trigger on wide panels. The sheet presentation
-     below adds its own translate motion. */
+  /* Flyouts fade in and out; scaling around the center would detach the
+     anchored edge from its trigger on wide panels. */
   transition: opacity var(--duration-fast) ease;
 }
 
-.flyout.is-open:not(.is-sheet) {
-  inset: auto;
-}
-
-@starting-style {
-  .flyout.is-open {
-    opacity: 0;
-  }
-}
-
-/* Bottom-sheet presentation. surface.js toggles .is-sheet when the flyout is
-   opened on coarse pointer / narrow viewports. */
-.flyout.is-sheet {
-  --menu-item-size: var(--control-size-lg);
+/* A popover enters the top layer with UA geometry that conflicts with anchored
+   positioning. surface.js sets popover="manual" on every surface it manages,
+   so this is the transport's own geometry rather than an opt-in. Kept scoped to
+   Actual surfaces so bare [popover] elements retain their platform
+   presentation. */
+.flyout[popover] {
   position: fixed;
-  inset-inline: 0;
-  inset-block-start: auto;
-  inset-block-end: 0;
-  inline-size: auto;
-  min-inline-size: 0;
-  max-inline-size: none;
-  max-block-size: min(calc(var(--viewport-block) * 0.75), 32rem);
-  overflow: auto;
-  grid-template-columns: 1fr;
-  padding: max(var(--space-30), env(safe-area-inset-top)) var(--space-30)
-    max(var(--space-30), env(safe-area-inset-bottom));
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-  /* Sheet motion is a directional slide from the viewport edge; it replaces
-     the base fade-only recipe. */
-  transition:
-    opacity var(--duration-fast) ease,
-    translate var(--duration-fast) ease;
+  inset: auto;
+  margin: 0;
 }
 
-.flyout[hidden] {
+/* A presentation class may own its *visible* display type, but must not
+   override the platform's hidden state. The UA closes a popover with
+   display: none, and an author declaration beats the UA origin whatever the
+   specificity — so .flyout's own display: grid would leave a closed popover
+   painted at its static position. The opacity is the exit target: with nothing
+   to animate, the overlay/display allow-discrete transition below would hold a
+   fully opaque panel in the top layer and then snap it away. */
+.flyout[popover]:not(:popover-open) {
   display: none;
   opacity: 0;
 }
 
-.flyout.is-sheet[hidden] {
-  translate: 0 var(--space-30);
+/* Both lifecycles in one rule: .is-open for a surface.js panel, :popover-open
+   for one an author drives natively with popovertarget. */
+.flyout:is(.is-open, :popover-open) {
+  inset: auto;
 }
 
+/* @starting-style is above the floor (Safari 17.5), so where it is missing the
+   entry simply has no animated origin and the panel appears at full opacity. */
 @starting-style {
-  .flyout.is-sheet.is-open {
-    translate: 0 var(--space-30);
+  .flyout:is(.is-open, :popover-open) {
+    opacity: 0;
   }
 }
 
+.flyout[hidden] {
+  display: none;
+  opacity: 0;
+}
+
+/* display keeps the exit transition alive for the [hidden] path; overlay does
+   the same for the native popover path, where hidePopover() would otherwise
+   drop the panel out of the top layer on the first frame and let a parent
+   overflow or a dialog clip the fade. An engine that cannot transition either
+   property ignores it and the exit is instant. */
 @supports (transition-behavior: allow-discrete) {
   .flyout {
     transition:
       opacity var(--duration-fast) ease,
-      display var(--duration-fast) allow-discrete;
-  }
-
-  .flyout.is-sheet {
-    transition:
-      opacity var(--duration-fast) ease,
-      translate var(--duration-fast) ease,
+      overlay var(--duration-fast) allow-discrete,
       display var(--duration-fast) allow-discrete;
   }
 }
@@ -4917,7 +5170,7 @@ dialog.drawer > form > header {
   margin: 0;
   color: var(--text-muted);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .flyout > section > ul {
@@ -4935,11 +5188,6 @@ dialog.drawer > form > header {
 /* Vertical dividers — .menu-separator (menu.css) is the canonical way to
    separate menu items. Flyout panels that are not menus use auto grid gap
    declared on .flyout itself. */
-@media print {
-  .flyout {
-    display: none !important;
-  }
-}
 
 /*
  * Menu — action list primitive consumed by flyout and context-menu.
@@ -4987,6 +5235,7 @@ dialog.drawer > form > header {
   background: transparent;
   color: var(--intent, var(--text));
   font: inherit;
+  font-size: var(--control-font-size);
   text-align: start;
   text-decoration: none;
   white-space: nowrap;
@@ -5018,30 +5267,36 @@ dialog.drawer > form > header {
 /* Checkable menu items are one command with one accessible state. Their
    indicator is generated so authors do not add a second interactive input. */
 .menu-item:is([role="menuitemcheckbox"], [role="menuitemradio"])::before {
-  display: grid;
+  content: "";
+  display: block;
   flex: 0 0 var(--menu-item-icon-size);
   inline-size: var(--menu-item-icon-size);
-  place-items: center;
-}
-
-.menu-item[role="menuitemcheckbox"]::before {
-  content: "";
+  block-size: var(--menu-item-icon-size);
 }
 
 .menu-item[role="menuitemcheckbox"][aria-checked="true"]::before {
-  content: "✓";
+  background: currentColor;
+  -webkit-mask: var(--icon-check) center / contain no-repeat;
+  mask: var(--icon-check) center / contain no-repeat;
 }
 
 .menu-item[role="menuitemcheckbox"][aria-checked="mixed"]::before {
-  content: "−";
+  background:
+    linear-gradient(currentColor 0 0) center / 60% max(var(--border-width), 0.125em) no-repeat;
 }
 
 .menu-item[role="menuitemradio"]::before {
-  content: "○";
+  background: radial-gradient(circle, transparent 0 46%, currentColor 48% 58%, transparent 60%);
 }
 
 .menu-item[role="menuitemradio"][aria-checked="true"]::before {
-  content: "●";
+  background: radial-gradient(
+    circle,
+    currentColor 0 25%,
+    transparent 27% 46%,
+    currentColor 48% 58%,
+    transparent 60%
+  );
 }
 
 .menu-item:focus-visible {
@@ -5061,7 +5316,7 @@ dialog.drawer > form > header {
   padding: var(--space-20);
   color: var(--text-muted);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .menu-separator {
@@ -5073,9 +5328,13 @@ dialog.drawer > form > header {
 /*
  * Tooltip — supplemental label overlaid near a trigger.
  *
- * Position, placement, and arrow position are managed by JavaScript
- * via position: fixed, left, top, data-placement, and --arrow-x.
- * Visibility is managed with hidden; CSS owns entry and exit animation.
+ * Position, placement, and arrow position are managed by JavaScript via left,
+ * top, data-placement, and --arrow-x. The runtime also owns `position`: it
+ * writes `absolute` for a tip whose trigger scrolls with the page, so the
+ * browser carries the tip along instead of the positioner correcting it a
+ * frame later, and `fixed` — the declaration below — for every other trigger.
+ * Visibility is the Popover lifecycle: tooltip.js promotes the tip to the top
+ * layer with popover="manual". CSS owns entry and exit animation.
  *
  * Public hooks:
  * --tooltip-bg
@@ -5083,8 +5342,8 @@ dialog.drawer > form > header {
  * --tooltip-arrow-size
  *
  * Internal:
- * --arrow-x (arrow position, written by floating.js)
- * --arrow-y (arrow position, written by floating.js)
+ * --arrow-x (arrow position, written by the positioner)
+ * --arrow-y (arrow position, written by the positioner)
  */
 .tooltip {
   --tooltip-bg: var(--surface-solid);
@@ -5092,7 +5351,6 @@ dialog.drawer > form > header {
   --tooltip-arrow-size: 5px;
 
   position: fixed;
-  z-index: var(--z-tooltip);
   max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
   padding: 0.25em 0.6em;
   border-radius: var(--radius-sm);
@@ -5111,21 +5369,56 @@ dialog.drawer > form > header {
   transition: opacity var(--duration-fast) ease;
 }
 
+/* Neutralize only the native geometry that conflicts with a positioned
+   tooltip. In particular, the UA overflow would turn the arrow into scroll
+   overflow instead of letting it project beyond the bubble.
+
+   One rule for both lifecycles: the runtime writes popover="manual" on the
+   tips it manages, and an application driving a .tooltip[popover] itself lands
+   on the same declarations. Who owns which is in
+   docs/pages/enhancements/overview.md. */
+.tooltip[popover] {
+  inset: auto;
+  margin: 0;
+  overflow: visible;
+}
+
+/* The closed state, for either lifecycle. .tooltip declares no display of its
+   own so the UA would already hide it, but the opacity target is what makes
+   the exit fade at all — see the overlay note below. */
+.tooltip[popover]:not(:popover-open) {
+  display: none;
+  opacity: 0;
+}
+
+/* The state before enhancement, and the author's to write — not the runtime's.
+   Wiring is lazy: tooltip.js adopts an explicit tip on its trigger's first
+   hover, so a tooltip nobody hovers keeps [hidden] for the whole life of the
+   page. Without this rule it would sit on screen at full opacity until then.
+   The runtime removes the attribute at the moment it takes the lifecycle over,
+   because an author declaration outranks the platform's own hidden state. */
 .tooltip[hidden] {
   display: none;
   opacity: 0;
 }
 
+/* Entry opacity, for either lifecycle — both are :popover-open.
+   @starting-style is above the floor (Safari 17.5); where it is missing the
+   tip simply appears at full opacity. */
 @starting-style {
-  .tooltip:not([hidden]) {
+  .tooltip:popover-open {
     opacity: 0;
   }
 }
 
+/* overlay is the native popover counterpart of display: it holds the tip in
+   the top layer until the fade finishes, instead of letting hidePopover()
+   demote it on the first frame. Ignored where unsupported. */
 @supports (transition-behavior: allow-discrete) {
   .tooltip {
     transition:
       opacity var(--duration-fast) ease,
+      overlay var(--duration-fast) allow-discrete,
       display var(--duration-fast) allow-discrete;
   }
 }
@@ -5172,12 +5465,6 @@ dialog.drawer > form > header {
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
 }
 
-@media print {
-  .tooltip {
-    display: none !important;
-  }
-}
-
 
 /* Disclosure */
 /*
@@ -5187,6 +5474,12 @@ dialog.drawer > form > header {
  * or demo styles. Decorative palettes and custom markers belong outside the
  * base component.
  *
+ * Container treatments (structural chrome, not skins):
+ * - default — the common raised shell;
+ * - .flush — the shell removed, only the item separators remain, so the group
+ *   can sit directly inside an existing surface (card, drawer, page section);
+ * - .separated — each item becomes its own card.
+ *
  * Public hooks:
  * --accordion-radius
  * --accordion-marker-color
@@ -5212,11 +5505,14 @@ dialog.drawer > form > header {
   list-style: none;
   padding: var(--space-40);
   color: var(--text);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
 }
 
-.accordion summary:hover {
-  color: var(--primary);
+.accordion summary:hover::after {
+  /* The whole row is one focus target; reinforcing only the end marker keeps
+     the affordance on the disclosure control instead of making the whole
+     label read as a link. */
+  --accordion-marker-color: currentColor;
 }
 
 .accordion summary::-webkit-details-marker {
@@ -5260,6 +5556,36 @@ dialog.drawer > form > header {
   padding-inline-start: 2rem;
 }
 
+/* Flush — the shell is dropped and only the shared item separators remain.
+   Zero inline padding puts the group edge to edge inside the surface that
+   already frames it, so no override is repeated per embedding. */
+.accordion.flush {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.accordion.flush summary,
+.accordion.flush details > summary + * {
+  padding-inline: 0;
+}
+
+/* Separated — each item owns a full card. The item's own border beats the
+   shared details + details separator on specificity alone, so nothing needs
+   undoing for the second item onwards. */
+.accordion.separated {
+  display: grid;
+  gap: var(--space-20);
+  border: 0;
+  background: transparent;
+}
+
+.accordion.separated > details {
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--accordion-radius);
+  background: var(--surface-raised);
+}
+
 @media (forced-colors: active) {
   .accordion {
     --accordion-marker-color: CanvasText;
@@ -5301,7 +5627,6 @@ dialog.drawer > form > header {
   border-inline-end-color: var(--spinner-value);
   border-radius: var(--radius-full);
   opacity: 0.85;
-  animation: actual-spin var(--duration-spin) linear infinite;
   vertical-align: text-bottom;
 }
 
@@ -5322,16 +5647,17 @@ dialog.drawer > form > header {
   --spinner-width: 3px;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .spinner {
+    animation: actual-spin var(--duration-spin) linear infinite;
+  }
+}
+
 @keyframes actual-spin {
   to {
     transform: rotate(360deg);
   }
 }
-@media print {
-  .spinner {
-    display: none !important;
-  }
-}
 
 /*
  * Skeleton placeholders for loading states.
@@ -5662,11 +5988,6 @@ dialog.drawer > form > header {
     translate var(--duration-slow) var(--ease-enter),
     background-color var(--duration) ease;
 }
-@media print {
-  .status-bar {
-    display: none !important;
-  }
-}
 
 
 /* Display */
@@ -5718,7 +6039,7 @@ dialog.drawer > form > header {
   color: var(--avatar-fg);
   font: inherit;
   font-size: var(--avatar-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: 1;
   text-decoration: none;
   vertical-align: middle;
@@ -5832,6 +6153,18 @@ a.avatar[aria-disabled="true"] {
   transform: translate(var(--avatar-status-translate-x), 50%);
 }
 
+/* Safari before 16.4 has no :dir(); the ancestor-attribute path is the
+   Degraded-tier fallback and the :dir() rules are dropped on their own there.
+   :dir() follows inherited directionality, so the explicit ltr rule
+   neutralizes an outer RTL fallback for a nested direction change. */
+[dir="rtl"] .avatar > .badge:empty {
+  --avatar-status-translate-x: -50%;
+}
+
+.avatar:dir(ltr) > .badge:empty {
+  --avatar-status-translate-x: 50%;
+}
+
 .avatar:dir(rtl) > .badge:empty {
   --avatar-status-translate-x: -50%;
 }
@@ -5920,10 +6253,31 @@ a.avatar[aria-disabled="true"] {
   inset-block-end: 0;
 }
 
+/* Safari before 16.4 has no :dir(); the ancestor-attribute path is the
+   Degraded-tier fallback and the :dir() rules are dropped on their own there.
+   :dir() follows inherited directionality, so the explicit ltr rules
+   neutralize an outer RTL fallback for a nested direction change. The rules
+   stay grouped by specificity so the fallback never follows the :dir() rules. */
+[dir="rtl"] .indicator-item {
+  --indicator-translate-x: -50%;
+}
+
+.indicator-item:dir(ltr) {
+  --indicator-translate-x: 50%;
+}
+
 .indicator-item:dir(rtl) {
   --indicator-translate-x: -50%;
 }
 
+[dir="rtl"] .indicator-item.start {
+  --indicator-translate-x: 50%;
+}
+
+.indicator-item.start:dir(ltr) {
+  --indicator-translate-x: -50%;
+}
+
 .indicator-item.start:dir(rtl) {
   --indicator-translate-x: 50%;
 }
@@ -5958,6 +6312,16 @@ a.avatar[aria-disabled="true"] {
 }
 /* @sync key-recipe */
 
+/* .key has a compact typographic default of its own, so its local size roles
+   step around that default instead of inheriting the generic mapping. */
+.key.sm {
+  font-size: var(--font-size-xs);
+}
+
+.key.lg {
+  font-size: var(--font-size-md);
+}
+
 /*
  * Message rows composed from an optional avatar, metadata, and bubble.
  *
@@ -6022,6 +6386,7 @@ a.avatar[aria-disabled="true"] {
 :where(.chat-bubble) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -6187,12 +6552,6 @@ a.avatar[aria-disabled="true"] {
   transform: none;
 }
 
-@media print {
-  .fab {
-    display: none;
-  }
-}
-
 /*
  * Rating — integer star rating drawn on native radio inputs.
  *
@@ -6305,23 +6664,16 @@ a.avatar[aria-disabled="true"] {
  *
  * `.steps` is what a step *is* — the counter, the marker, `.step-label`,
  * `.step-complete`, `aria-current="step"`. It carries no orientation, so it is
- * never written alone. `.steps-horizontal` and `.steps-vertical` are what a
- * sequence *looks like*, and they are peers: neither is the default the other
- * has to exclude, so no rule says `:not(...)` and no rule undoes another's
- * layout.
+ * never written alone. The two orientations are peers: no rule says
+ * `:not(...)` and no rule undoes another's layout.
  *
- * Orientation and labels are independent dimensions. `.step-label` is optional
- * in either orientation; when a sequence carries names, every step carries
- * one:
+ * Orientation and labels are independent. `.step-label` is optional in either;
+ * when a sequence carries names, every step carries one:
  *
  *                 empty steps           .step-label on every step
  *   horizontal    compact progression   named sequence, stacked or inline
  *   vertical      compact rail          named sequence, labels beside markers
  *
- * An empty step is a marker and nothing else, so it is compact by structure —
- * `> li:empty` in both orientations, no variant class, and nothing authored
- * only to be hidden again. The page around it owns the step name.
- *
  * A label may be an `a[href]`, which is the whole interactive surface: the
  * marker is never navigable, so navigating a flow means naming its
  * destinations. Anything else focusable in a step is out of contract.
@@ -6392,7 +6744,7 @@ a.avatar[aria-disabled="true"] {
   background: var(--step-marker-bg);
   color: var(--step-marker-fg);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: 1;
 }
 
@@ -6452,11 +6804,9 @@ a.avatar[aria-disabled="true"] {
   border-width: calc(var(--border-width) * 2);
 }
 
-/* Weight marks "where I am now". Complete needs none: its filled disc already
-   reads as strongly. */
-.steps > [aria-current="step"] .step-label {
-  font-weight: var(--font-weight-strong);
-}
+/* No label weight change for current: the accented marker with its doubled
+   border already carries the state, and selection never changes text metrics.
+   Complete needs none either: its filled disc already reads as strongly. */
 
 .steps > .step-complete:not([aria-current="step"])::before {
   content: var(--step-complete-mark, counter(actual-step));
@@ -6514,8 +6864,8 @@ a.avatar[aria-disabled="true"] {
    `:empty` says exactly what the markup says, the way `.badge:empty` does, and
    it reads the item's own content: bare text in an `<li>` keeps a reading width
    like its wrapped peers, where `> li:has(.step-label)` would give it a marker
-   floor and skew the row. It also predates `:has()` by a decade, so the compact
-   form reaches the Degraded tier and only the inline bonus needs `:has()`. */
+   floor and skew the row. `:empty` also keeps the compact form reachable on the
+   Degraded tier, where only the inline bonus needs `:has()`. */
 .steps-horizontal > li:empty {
   flex: 1 1 0;
   justify-items: start;
@@ -6546,48 +6896,43 @@ a.avatar[aria-disabled="true"] {
 }
 
 /*
- * The one horizontal container query. Past 60rem a labelled row has the room
- * to put marker and label inline and still leave the connector a real region
- * between groups, rather than a stub. Calibrated on five steps — the widest
- * supported row, and therefore the binding case — and it counts nothing, so it
- * serves every count. Below it, stacked; a marker row is already the shape
- * this query produces and stays out of it.
- *
- * Horizontal is a 2-5 step component. Outside that domain the rule simply
- * applies as written, because a row that is out of contract is not owed a
- * curated fallback.
+ * The one horizontal container query: past 60rem a labelled row can put marker
+ * and label inline and still leave the connector a real region between groups.
+ * It counts nothing, so it serves every count; below it, stacked. A marker row
+ * is already the shape this query produces and stays out of it.
+ *
+ * Horizontal is a 2-5 step component. Outside that domain the rule applies as
+ * written — a row out of contract is not owed a curated fallback.
  */
-@supports (container-type: inline-size) {
-  @container actual-container (inline-size >= 60rem) {
-    .steps-horizontal:has(.step-label) > li {
-      display: flex;
-      flex: 1 1 auto;
-      align-items: center;
-      gap: var(--step-inline-gap);
-      min-inline-size: 0;
-      text-align: start;
-      white-space: nowrap;
-    }
+@container actual-container (inline-size >= 60rem) {
+  .steps-horizontal:has(.step-label) > li {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--step-inline-gap);
+    min-inline-size: 0;
+    text-align: start;
+    white-space: nowrap;
+  }
 
-    .steps-horizontal:has(.step-label) > li::after {
-      position: static;
-      flex: 1 1 2rem;
-      inline-size: auto;
-      block-size: var(--step-size);
-      margin-inline-end: var(--step-inline-gap);
-      background: var(
-        --step-inline-connector,
-        var(
-          --step-connector,
-          linear-gradient(var(--step-line), var(--step-line)) center /
-          100% var(--step-line-size) no-repeat
-        )
-      );
-    }
+  .steps-horizontal:has(.step-label) > li::after {
+    position: static;
+    flex: 1 1 2rem;
+    inline-size: auto;
+    block-size: var(--step-size);
+    margin-inline-end: var(--step-inline-gap);
+    background: var(
+      --step-inline-connector,
+      var(
+        --step-connector,
+        linear-gradient(var(--step-line), var(--step-line)) center /
+        100% var(--step-line-size) no-repeat
+      )
+    );
+  }
 
-    .steps-horizontal:has(.step-label) > li:last-child {
-      flex: 0 0 auto;
-    }
+  .steps-horizontal:has(.step-label) > li:last-child {
+    flex: 0 0 auto;
   }
 }
 
@@ -6663,8 +7008,12 @@ a.avatar[aria-disabled="true"] {
  * Public hooks:
  * --app-nav-size
  * --app-nav-gap
+ * --app-nav-icon-size
  */
 :where(.app-nav) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -6673,6 +7022,7 @@ a.avatar[aria-disabled="true"] {
 .app-nav {
   --app-nav-size: 4rem;
   --app-nav-gap: var(--space-10);
+  --app-nav-icon-size: 1.5rem;
 
   position: sticky;
   inset-block-end: 0;
@@ -6709,9 +7059,9 @@ a.avatar[aria-disabled="true"] {
 }
 
 .app-nav > a > :where(svg, img, [aria-hidden="true"]) {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-  font-size: 1.5rem;
+  inline-size: var(--app-nav-icon-size);
+  block-size: var(--app-nav-icon-size);
+  font-size: var(--app-nav-icon-size);
   line-height: 1;
 }
 
@@ -6720,15 +7070,20 @@ a.avatar[aria-disabled="true"] {
   color: var(--text);
 }
 
-.app-nav > a:where([aria-current]:not([aria-current="false"])) {
+/* Current tile is already a full selected surface. Selection never changes
+   text metrics: the shared medium weight is kept, no permanent indicator is
+   added here. */
+.app-nav > a[aria-current="page"] {
   background: var(--state-selected);
   color: var(--state-selected-fg);
-  font-weight: var(--font-weight-bold);
 }
 
-@media print {
-  .app-nav {
-    display: none;
+@media (forced-colors: active) {
+  /* --state-selected flattens to a UA color that no longer distinguishes the
+     current tile from the rest of the bar, so paint the system Highlight pair. */
+  .app-nav > a[aria-current="page"] {
+    background: Highlight;
+    color: HighlightText;
   }
 }
 
@@ -6743,8 +7098,15 @@ a.avatar[aria-disabled="true"] {
  * --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. */
+   Local intent classes still win because :where() has zero specificity.
+   The intent tokens are reset alongside --ui-*: the shared variants
+   (.soft/.solid/.outline/.surface) read --intent / --intent-fg / --intent-soft-fg
+   when they paint this surface, so an ancestor intent would otherwise leak
+   through a variant that has no local intent class. */
 :where(.navbar) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -6800,10 +7162,15 @@ a.avatar[aria-disabled="true"] {
   text-decoration: none;
 }
 
-.nav-link:where([aria-current]:not([aria-current="false"])) {
+/* nav-link serves two contracts: plain page navigation (aria-current="page")
+   and scrollspy, which toggles aria-current="location" on the active link.
+   Presence is the contract: the attribute is set on the current link and
+   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(--text);
-  font-weight: var(--font-weight-bold);
+  color: var(--state-selected);
 }
 
 .nav-link:hover {
@@ -6811,11 +7178,18 @@ a.avatar[aria-disabled="true"] {
   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 {
+  color: 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. */
 .nav-list {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   --gap: var(--space-20);
   gap: var(--gap);
   margin: 0;
@@ -6828,9 +7202,23 @@ a.avatar[aria-disabled="true"] {
 }
 
 .nav-list .nav-link {
+  position: relative;
   inline-size: 100%;
 }
 
+/* Vertical current indicator: inset inline-start trait in currentColor, so it
+   follows the forced palette without a forced-colors block and never touches
+   the row separators. Navbar horizontal links keep color + surface only. The
+   positioning context lives on every row link, so becoming current never moves
+   an app-positioned decoration to a new containing block. */
+.nav-list .nav-link[aria-current]::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--space-20);
+  inset-inline-start: 0;
+  border-inline-start: 2px solid currentColor;
+}
+
 /*
  * Breadcrumb — current-location trail from the site root.
  *
@@ -6866,8 +7254,7 @@ a.avatar[aria-disabled="true"] {
   text-decoration: none;
 }
 
-.breadcrumb a:not([aria-current]):hover,
-.breadcrumb a[aria-current="false"]:hover {
+.breadcrumb a:not([aria-current="page"]):hover {
   color: var(--text);
   text-decoration: underline;
 }
@@ -6876,7 +7263,7 @@ a.avatar[aria-disabled="true"] {
   border-radius: var(--radius-sm);
 }
 
-.breadcrumb :where(li, a, span):where([aria-current]:not([aria-current="false"])) {
+.breadcrumb :where(li, a, span)[aria-current="page"] {
   color: var(--text);
   font-weight: var(--font-weight-medium);
 }
@@ -6900,6 +7287,7 @@ a.avatar[aria-disabled="true"] {
   margin: 0;
   padding: 0;
   list-style: none;
+  font-size: var(--control-font-size);
 
   /* Arrows, page numbers, and truncation ellipses share one geometric
      system: equal digit widths keep the row from re-flowing as numbers grow
@@ -6931,6 +7319,11 @@ a.avatar[aria-disabled="true"] {
  * and arrow-key navigation. CSS owns the tab strip appearance and
  * active indicator.
  *
+ * aria-orientation is matched inside :where() so it keeps describing which
+ * arrow keys move between tabs without also carrying cascade weight: an
+ * author class can then adjust a vertical strip without restating the
+ * attribute to reach its specificity.
+ *
  * Public hooks:
  * --tab-gap
  */
@@ -6951,7 +7344,7 @@ a.avatar[aria-disabled="true"] {
   list-style: none;
 }
 
-.tabs[aria-orientation="vertical"] {
+.tabs:where([aria-orientation="vertical"]) {
   display: grid;
   align-content: start;
   justify-items: stretch;
@@ -6972,12 +7365,15 @@ a.avatar[aria-disabled="true"] {
   background: transparent;
   color: var(--text-muted);
   font: inherit;
-  font-weight: var(--font-weight-strong);
+  font-size: var(--control-font-size);
+  /* Selection must not change text metrics: a heavier active label would shift
+     the strip. The active state is carried by color and the indicator line. */
+  font-weight: var(--font-weight-semibold);
   text-decoration: none;
   cursor: pointer;
 }
 
-.tabs[aria-orientation="vertical"] .tab {
+.tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
 }
@@ -6991,6 +7387,8 @@ a.avatar[aria-disabled="true"] {
   color: var(--text);
 }
 
+/* The ring is square on the edge the tab is attached to, so it reads as part
+   of the strip rather than a floating chip. */
 .tab:focus-visible {
   outline: var(--focus-outline);
   outline-color: var(--focus);
@@ -6998,18 +7396,27 @@ a.avatar[aria-disabled="true"] {
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
 
-.tab[aria-selected="true"] {
+/* A vertical tab is attached along its inline end, not its block end, so the
+   horizontal geometry above would round the wrong pair of corners. Logical
+   corners keep it correct in RTL. */
+.tabs:where([aria-orientation="vertical"]) .tab:focus-visible {
+  border-start-start-radius: var(--radius-sm);
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--radius-sm);
+  border-end-end-radius: 0;
+}
+
+.tab[aria-selected="true"],
+.tab[aria-current="page"] {
   color: var(--intent, var(--state-selected));
-  /* Second, layout-free selected cue — the underline alone is color-only in
-     forced colors. */
-  font-weight: var(--font-weight-bold);
 }
 
 /* The selected indicator lives on a positioned pseudo so that only the active
    tab owns an underline: a transparent border on every tab would surface in
    forced colors and erase the distinction. currentColor follows the palette the
    UA forces, so no forced-colors block is needed. */
-.tab[aria-selected="true"]::after {
+.tab[aria-selected="true"]::after,
+.tab[aria-current="page"]::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -7017,7 +7424,8 @@ a.avatar[aria-disabled="true"] {
   border-block-end: 2px solid currentColor;
 }
 
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"]::after {
+.tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
+.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;
@@ -7074,7 +7482,7 @@ a.avatar[aria-disabled="true"] {
 .data-list > dt {
   min-inline-size: 0;
   margin-block-start: 0;
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .data-list > dd {
@@ -7102,6 +7510,7 @@ a.avatar[aria-disabled="true"] {
   --list-divider: var(--border-width) solid var(--border);
 
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 0;
   margin: 0;
   padding: 0;
@@ -7113,10 +7522,17 @@ a.avatar[aria-disabled="true"] {
   margin: 0;
 }
 
+/*
+ * Flex, not a three-track grid: the leading and trailing regions are optional,
+ * and a fixed `auto minmax(0, 1fr) auto` template gives an absent region a
+ * track anyway — the content of a row with no leading region lands in the
+ * leading track and the trailing control inherits the flexible one, which is
+ * the opposite of the intent. Flex drops both the track and its gap when a
+ * region is not there, so all four shapes work off one rule.
+ */
 .list > :where(.list-item),
 .list > li > .list-item {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  display: flex;
   /* Regions align to the first line, so leading, title, and trailing controls
      share one horizontal line while supporting text wraps beneath. */
   align-items: start;
@@ -7132,6 +7548,7 @@ a.avatar[aria-disabled="true"] {
 }
 
 a.list-item {
+  position: relative;
   color: inherit;
   text-decoration: none;
 }
@@ -7140,7 +7557,31 @@ a.list-item:hover {
   background: var(--surface-subtle);
 }
 
+/* Current row in a navigational list (master/detail). Generic by design: the
+   visual treatment only cares that the row is current, so presence is the
+   contract — the attribute is set on the current row and removed everywhere
+   else, never serialized as aria-current="false". The value (page, location,
+   …) stays free for assistive technology.
+   Calm by design: the row keeps its normal text metrics and color on a subtle
+   surface, and the selected accent lives on an inset inline-start trait only.
+   The trait is a real border, so it survives forced colors without a repaint
+   block. The positioning context lives on every row link, so becoming current
+   never moves an app-positioned decoration to a new containing block. */
+a.list-item[aria-current] {
+  background: var(--surface-subtle);
+}
+
+a.list-item[aria-current]::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--list-item-pad-block);
+  inset-inline-start: 0;
+  border-inline-start: 2px solid var(--state-selected);
+}
+
+/* The content region is the one that flexes, whichever position it holds. */
 .list-item-content {
+  flex: 1 1 0;
   min-inline-size: 0;
 }
 
@@ -7148,16 +7589,19 @@ a.list-item:hover {
 .list-item-text {
   display: block;
   margin: 0;
+  overflow-wrap: anywhere;
 }
 
 .list-item-text {
   color: var(--text-muted);
   font-size: var(--font-size-sm);
-  overflow-wrap: anywhere;
 }
 
+/* The auto margin keeps the trailing region at the row's end even in a row
+   with no content region to absorb the free space. */
 .list-item-trailing {
-  justify-self: end;
+  flex: none;
+  margin-inline-start: auto;
   min-inline-size: 0;
 }
 
@@ -7213,13 +7657,13 @@ a.list-item:hover {
   vertical-align: baseline;
 }
 
-.table thead th {
-  vertical-align: bottom;
-}
-
 .table th {
   color: var(--text-muted);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
+}
+
+.table thead th {
+  vertical-align: bottom;
 }
 
 .table thead {
@@ -7398,6 +7842,13 @@ a.list-item:hover {
   border-end-start-radius: var(--join-es);
 }
 
+/* A square icon button has an explicit block size, which otherwise prevents
+   align-items: stretch from matching a taller labelled sibling. The button's
+   existing min-block-size keeps the standalone square-size invariant intact. */
+.join > .btn.icon-only {
+  block-size: auto;
+}
+
 .join > :first-child {
   --join-ss: var(--join-radius);
   --join-es: var(--join-radius);
@@ -7780,7 +8231,8 @@ a.list-item:hover {
   text-decoration: none;
 }
 
-.link-muted:hover {
+.link-muted:hover,
+.link-muted:focus-visible {
   color: var(--text);
 }
 
@@ -7821,7 +8273,8 @@ a.list-item:hover {
  * They are escape hatches for layout nudges, not a full atomic scale.
  *
  * Core principle:
- * - .sm / .lg provide local rhythm through --gap and --density-space.
+ * - .compact / .spacious provide inherited rhythm through --gap and
+ *   --density-space.
  * - utilities consume the current context instead of defining their own -sm/-lg scale.
  * - optional utilities extend core utilities, they do not re-express them.
  * - follow verbose .{property}-{value} naming.
@@ -7902,18 +8355,6 @@ a.list-item:hover {
   flex-wrap: nowrap;
 }
 
-.gap-sm {
-  gap: var(--space-20);
-}
-
-.gap-md {
-  gap: var(--space-40);
-}
-
-.gap-lg {
-  gap: var(--space-50);
-}
-
 .justify-content-start {
   --cluster-justify: flex-start;
   justify-content: flex-start;
@@ -7971,6 +8412,10 @@ a.list-item:hover {
   margin-block-end: auto;
 }
 
+/* Consume the inherited --gap rhythm on an arbitrary layout container.
+   Setting --gap alone only defines the custom property; it has no visual
+   effect unless the element already uses gap: var(--gap) (as .stack,
+   .cluster, .grid, etc. do). */
 .gap-context {
   gap: var(--gap);
 }
@@ -8022,15 +8467,15 @@ a.list-item:hover {
 }
 
 .font-weight-normal {
-  font-weight: var(--font-weight);
+  font-weight: var(--font-weight-normal);
 }
 
 .font-weight-medium {
   font-weight: var(--font-weight-medium);
 }
 
-.font-weight-strong {
-  font-weight: var(--font-weight-strong);
+.font-weight-semibold {
+  font-weight: var(--font-weight-semibold);
 }
 
 .font-weight-bold {
@@ -8071,18 +8516,28 @@ a.list-item:hover {
   border-inline-end: var(--border-width) solid var(--border);
 }
 
-/* Surface */
+/* Surface. These are semantic surfaces, not arbitrary paint: each owns its
+   matching ink and rebinds --heading to that ink, so it stays readable when it
+   recreates a light surface inside a context that installed a dark one
+   (.inverted). Intent ink is not inherited through a surface utility; use
+   .intent-color for that. */
 .background-surface {
+  --heading: currentColor;
+
   background: var(--surface);
   color: var(--text);
 }
 
 .background-raised {
+  --heading: currentColor;
+
   background: var(--surface-raised);
   color: var(--text);
 }
 
 .background-subtle {
+  --heading: currentColor;
+
   background: var(--surface-subtle);
   color: var(--text);
 }