actual-css 0.3.0 → 0.4.0

package/dist/actual.css

@@ -1,3 +1,4 @@
+/* Core — the minimal Actual language. Every module depends on this order. */
 /* Mild reset: useful defaults without classless magic. */
 *,
 *::before,
@@ -130,13 +131,21 @@ select {
 
   /* 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. */
+     at its baseline because density does not change typography.
+
+     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. */
   --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-font-size: var(--font-size-md);
+  --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
 }
 
@@ -165,6 +174,10 @@ select {
   --soft-bg-mix: 88%;
   --soft-border-mix: 65%;
   --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. */
+  --soft-fg-mix: 100%;
 
   /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
@@ -189,7 +202,8 @@ select {
 }
 
 @media (forced-colors: active) {
-  :root {
+  :root,
+  [data-theme] {
     --state-selected: Highlight;
     --state-selected-fg: HighlightText;
     --state-disabled: GrayText;
@@ -331,6 +345,16 @@ select {
   --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
+/* 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
+   recompute it from their own --primary (same resolution rule as above).
+   Unsupported browsers ignore it; forced-colors keeps browser control. */
+:root,
+[data-theme] {
+  accent-color: var(--primary);
+}
+
 /* Tone subsystem — fixed-backdrop foreground for components placed over media
    or other surfaces outside the theme token stack. Use data-theme islands for
    full dark/light subtree inversion. */
@@ -345,13 +369,13 @@ select {
 /* Focus ring derivation — color-mix tier. Runs whether or not light-dark()
    is also supported, so it covers the color-mix-without-light-dark browser
    tier on its own; the light-dark block below refines it further with the
-   light/dark alpha split once both features are available. Deriving from
-   --focus (not a literal) means overriding --primary/--focus, in the
-   default theme or any custom one, keeps the ring in sync automatically. */
+   light/dark alpha split once both features are available. Declared on every
+   [data-theme] island (not just the built-in light/dark pair) so custom
+   islands recolor the ring for free; a preset that re-declares --focus-ring
+   later in source order intentionally pins its own ring instead. */
 @supports (color: color-mix(in oklch, red, white)) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  [data-theme] {
     --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
   }
 }
@@ -400,7 +424,7 @@ select {
 
 @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
   :root,
-  [data-theme="light"] {
+  [data-theme] {
     --focus-ring: light-dark(
       color-mix(in oklch, var(--focus) 30%, transparent),
       color-mix(in oklch, var(--focus) 28%, transparent)
@@ -410,8 +434,7 @@ select {
 
 @media (forced-colors: active) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  [data-theme] {
     --focus-outline-color: Highlight;
     --focus-ring-shadow: none;
 
@@ -421,8 +444,9 @@ select {
 
 @media (prefers-contrast: more) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  /* The repeated attribute intentionally outranks single-attribute preset
+     palettes, including a preset stylesheet loaded after the core. */
+  [data-theme][data-theme] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
     --focus-ring-width: 4px;
@@ -530,224 +554,22 @@ small {
   --intent-fg: var(--neutral-fg);
 }
 
-/*
- * Core layout primitives: stack, cluster, center, frame, app-shell, media,
- * sidebar-layout. Each primitive owns a single, readable behavior; they are
- * meant to compose in markup.
- *
- * Public hooks:
- * --cluster-align
- * --cluster-justify
- * --cluster-wrap
- * --center-size
- * --center-pad
- * --frame-ratio
- * --sidebar-layout-size
- *
- * Child contracts:
- * .stack owns vertical rhythm: direct-child margins are reset, spacing comes
- *   from --gap.
- * .cluster owns inline rhythm: direct-child margins are reset, spacing comes
- *   from --gap.
- * .frame sizes direct media children (img/video/iframe/canvas/svg) to fill the
- *   frame.
- */
-.container-query {
-  container-type: inline-size;
-}
-
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-}
-
-.stack > * {
-  margin: 0;
-}
-
-.cluster {
-  display: flex;
-  flex-wrap: var(--cluster-wrap, wrap);
-  align-items: var(--cluster-align, center);
-  justify-content: var(--cluster-justify, flex-start);
-  gap: var(--gap);
-}
-
-.cluster > * {
-  margin: 0;
-}
-
-.center {
-  box-sizing: content-box;
-  max-inline-size: var(--center-size, 72rem);
-  margin-inline: auto;
-  padding-inline: var(--center-pad, 1rem);
-}
-
-.frame {
-  overflow: hidden;
-  aspect-ratio: var(--frame-ratio, 16 / 9);
-}
-
-.frame > :where(img, video, iframe, canvas, svg) {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-.app-shell {
-  min-block-size: var(--viewport-block);
-  display: flex;
-  flex-direction: column;
-}
-
-/* Media object: fixed-width leading element (avatar, icon, image) + flexible
-   trailing content. Replaces the repeated "auto minmax(0, 1fr)" pattern in
-   author cards, comments, meta rows, and similar compositions. */
-.media {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--gap);
-  align-items: start;
-}
-
-/* Sidebar layout: content + aside using grid. Use this when the aside is
-   sticky or the content is multi-section. The aside width is tunable with
-   --sidebar-layout-size. */
-.sidebar-layout {
-  display: grid;
-  gap: var(--gap);
-  grid-template-columns: minmax(0, 1fr);
-}
-
-/* Container queries are the preferred path; without them the @supports not
-   block below restores the same columns at the same viewport breakpoint. */
-@container (width >= 64rem) {
-  .container-query .sidebar-layout {
-    grid-template-columns: minmax(0, 1fr) var(--sidebar-layout-size, 18rem);
-    align-items: start;
-  }
-}
-
-@supports not (container-type: inline-size) {
-  @media (min-width: 64rem) {
-    .container-query .sidebar-layout {
-      grid-template-columns: minmax(0, 1fr) var(--sidebar-layout-size, 18rem);
-      align-items: start;
-    }
-  }
-}
-
-/*
- * Responsive equal-width grids, with fixed-column presets below.
- *
- * Public hooks:
- * --grid-min
- * --grid-columns
- */
-.grid {
-  display: grid;
-  gap: var(--gap);
-  grid-template-columns: var(
-      --grid-columns,
-      repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr))
-    );
-}
-
-/* Fixed-column grids at their full count by default: .grid-2/3/4/6 stay at
-   2/3/4/6 columns unless wrapped in .container-query, which collapses the
-   column count on narrow wrappers (a 2-col intermediate step for
-   .grid-3/.grid-4; .grid-6 starts at 2 columns because it is meant for
-   compact items that do not need a full single-column stack). */
-.grid-2,
-.grid-3,
-.grid-4,
-.grid-6 {
-  display: grid;
-  gap: var(--gap);
-}
-
-.grid-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.grid-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.grid-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-.grid-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-/* Container queries are the preferred responsive path; browsers without them
-   ignore these rules and get the equivalent @media rules from the
-   @supports not (container-type) block below — same columns, same breakpoints. */
-@container (width < 28rem) {
-  .container-query .grid-2,
-  .container-query .grid-3,
-  .container-query .grid-4 {
-    grid-template-columns: 1fr;
-  }
-
-  .container-query .grid-6 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (28rem <= width < 48rem) {
-  .container-query .grid-3,
-  .container-query .grid-4 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (28rem <= width < 64rem) {
-  .container-query .grid-6 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@supports not (container-type: inline-size) {
-  @media (max-width: 63.999rem) {
-    .container-query .grid-6 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 47.999rem) {
-    .container-query .grid-3,
-    .container-query .grid-4 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 27.999rem) {
-    .container-query .grid-2,
-    .container-query .grid-3,
-    .container-query .grid-4 {
-      grid-template-columns: 1fr;
-    }
-
-    .container-query .grid-6 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-}
-
 /*
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline set --ui-* for components that opt into
- * shared variants. .inverted is a surface modifier, not a variant: it also
- * paints the element directly (background/color/border-color) so it works on
- * any block, competing with component surface treatments (.card.subtle).
+ * shared variants. .inverted is a surface modifier, not a variant: it paints
+ * the element directly (background/color/border-color) so it works on any bare
+ * block, and remaps the shared --ui-* tokens so participating components
+ * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
+ * before components, so a component with its own explicit surface (e.g.
+ * .accordion) naturally keeps that surface — .inverted never forces a
+ * non-participant.
  * Component-specific defaults (.btn solid-by-default, .badge
  * soft-by-default, .alert soft-by-default) live with their components:
  *   components/button.css — .btn default solid + .btn.ghost + .btn.link
- *   components/badge.css   — .badge default soft
- *   components/alert.css   — .alert default soft (consumes --ui-* directly)
+ *   components/badge.css   — .badge default soft behind explicit --ui-*
+ *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
  * .sm/.lg set shared density tokens: spacing rhythm and geometry only.
  * Density never changes typography — controls keep their font-size and
@@ -775,18 +597,23 @@ small {
 
 .outline {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
-  --ui-border: var(--intent, var(--border));
-}
-
-/* Inverse surface treatment. Components (e.g. .card) compose through --ui-*;
-   the direct background/color/border-color also make .inverted useful on a
-   generic element. --heading is set so global headings (var(--heading, inherit))
-   do not inherit an outside heading color onto the dark surface. */
+  --ui-fg: var(--intent, currentColor);
+  --ui-border: var(--intent, currentColor);
+}
+
+/* Inverse surface treatment. Paints the element directly (so it works on any
+   bare block) and remaps the shared --ui-* tokens so opt-in components
+   (.card, .navbar) invert through their own rules. Because this loads before
+   component base surfaces, components with their own explicit surface
+   (e.g. .accordion) keep it — participation is opt-in, never forced. --heading
+   is set so global headings (var(--heading, inherit)) do not inherit an outside
+   heading color onto the dark surface; surface-owning descendants derive
+   their contextual aliases from their own local surface. */
 .inverted {
   --ui-bg: var(--surface-solid);
   --ui-fg: var(--surface);
   --ui-border: transparent;
+  --ui-hover-bg: var(--surface-solid);
 
   --heading: var(--surface);
   --busy-overlay-bg: var(--surface-solid);
@@ -814,4677 +641,66 @@ small {
 @supports (color: color-mix(in oklch, red, white)) {
   .soft {
     /* @sync soft-recipe */
-    --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
+    --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
-      in oklch,
+      in oklab,
       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));
     /* @sync soft-recipe */
   }
+
+  .inverted {
+    --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black);
+  }
 }
 
 /* Interactive hover recipes live in the components that consume them:
      components/button.css and components/badge.css. */
 
-/*
- * Prose is the opt-in rich text scope for authored content.
- *
- * Global element styles stay mild so app UI is not shaped accidentally. Page
- * layout, forms, cards, navigation, and app tables remain outside this scope.
- *
- * Public hooks:
- * --prose-size
- * --prose-line-height
- * --prose-measure
- * --prose-flow
- * --prose-heading-line-height
- * --prose-h1
- * --prose-h2
- * --prose-h3
- * --prose-h4
- */
-
-.prose {
-  /* Prose scale */
-  --prose-size: 1rem;
-  --prose-line-height: 1.7;
-  --prose-measure: 70ch;
-  --prose-flow: 1em;
-  --prose-heading-line-height: 1.2;
-  --prose-h1: 2rem;
-  --prose-h2: 1.5rem;
-  --prose-h3: 1.25rem;
-  --prose-h4: 1.125rem;
-
-  max-inline-size: var(--prose-measure);
-  color: var(--text);
-  font-size: var(--prose-size);
-  line-height: var(--prose-line-height);
-  overflow-wrap: break-word;
-}
-
-.prose :where(p, ul, ol, dl, blockquote, pre, table, figure) {
-  margin-block: var(--prose-flow) 0;
-}
-
-.prose :where(h1, h2, h3, h4, h5, h6) {
-  margin-block: 1.5em 0;
-  color: var(--text);
-  font-weight: var(--font-weight-strong);
-  line-height: var(--prose-heading-line-height);
-}
-
-.prose :where(p, li, blockquote) {
-  text-wrap: pretty;
-}
-
-.prose > :first-child {
-  margin-block-start: 0;
-}
-
-.prose h1 {
-  font-size: var(--prose-h1);
-}
-
-.prose h2 {
-  font-size: var(--prose-h2);
-}
-
-.prose h3 {
-  font-size: var(--prose-h3);
-}
-
-.prose h4 {
-  font-size: var(--prose-h4);
-}
-
-.prose a {
-  color: var(--primary);
-  text-decoration-line: underline;
-  text-decoration-thickness: 0.08em;
-  text-underline-offset: 0.18em;
-}
+/* Focus baseline — a visible outline is the guaranteed focus affordance. The
+   :focus outline covers legacy browsers; modern browsers hide it for
+   pointer/mouse focus and interactive components layer their ring on top.
 
-.prose a:hover {
-  text-decoration-thickness: 0.12em;
+   Invariant: an interactive component must never rely on box-shadow alone
+   for its keyboard focus indicator. Components that remove the native
+   outline on :focus-visible replace it with a transparent outline — invisible
+   normally, forced to the system focus color under forced-colors. */
+:focus {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }
 
-@supports (color: color-mix(in oklch, red, white)) {
-  .prose a:hover {
-    color: color-mix(in oklch, var(--primary), var(--text) 15%);
+@supports selector(:focus-visible) {
+  :focus:not(:focus-visible) {
+    outline: none;
   }
-}
-
-.prose :where(ul, ol) {
-  padding-inline-start: 1.5em;
-}
-
-.prose li + li {
-  margin-block-start: 0.35em;
-}
-
-.prose code {
-  padding: 0.15em 0.3em;
-  border-radius: var(--radius-sm);
-  background: var(--surface-subtle);
-  color: var(--text);
-  font-size: 0.875em;
-}
-
-/* Visual twin of .key (components/key.css) — keep the two recipes in sync. */
-.prose kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: 1.75em;
-  min-block-size: 1.6em;
-  padding-inline: 0.45em;
-  border: var(--border-width) solid var(--border);
-  border-block-end-width: calc(var(--border-width) * 2);
-  border-radius: var(--radius-sm);
-  background: var(--surface-raised);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-  vertical-align: 0.08em;
-}
-
-.prose pre {
-  overflow-x: auto;
-  padding: 1em;
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface-subtle);
-}
-
-.prose pre code {
-  padding: 0;
-  background: transparent;
-}
-
-.prose blockquote {
-  padding-inline-start: 1em;
-  border-inline-start: var(--border-width) solid var(--border);
-  color: var(--text-muted);
-}
-
-.prose figure {
-  margin-inline: 0;
-}
-
-.prose figcaption {
-  margin-block-start: 0.5em;
-  color: var(--text-muted);
-  font-size: 0.875em;
-}
-
-.prose table {
-  inline-size: 100%;
-  border-collapse: collapse;
-}
-
-.prose th,
-.prose td {
-  padding: 0.5em;
-  border-block-end: var(--border-width) solid var(--border);
-  text-align: start;
-}
-
-/* Lead paragraph: a slightly larger, more relaxed reading-introduction text.
-   Non-fluid and always available — use .text-lead from the optional fluid
-   module for marketing/display surfaces. */
-.lead {
-  font-size: 1.125em;
-  line-height: var(--line-height-relaxed);
-}
-
-/* Readable content measure. Composes with .center for centering or with
-   margin-inline: auto for a one-off centered block. */
-.measure {
-  max-inline-size: var(--prose-measure, 70ch);
-}
-
-.prose.sm {
-  --prose-size: 0.9375rem;
-  --prose-h1: 1.75rem;
-  --prose-h2: 1.375rem;
-  --prose-h3: 1.125rem;
-  --prose-h4: 1rem;
-}
-
-.prose.lg {
-  --prose-size: 1.125rem;
-  --prose-measure: 72ch;
-  --prose-h1: 2.25rem;
-  --prose-h2: 1.625rem;
-  --prose-h3: 1.375rem;
-  --prose-h4: 1.25rem;
-}
-
-/* Controls */
-/*
- * Buttons for actions and button-like links.
- *
- * .btn is primarily for actionable elements: <button>, <a href>,
- * input[type="button"|"submit"|"reset"].
- *
- * Keeps shared intent, variant, and size behavior with a solid default.
- *
- * Disabled state uses the native disabled attribute for buttons and inputs.
- * Anchors have no native disabled state, so a.btn uses aria-disabled="true"
- * for disabled styling and activation guards.
- *
- * Public hooks:
- * --btn-font-size
- * --btn-min-size
- * --btn-pad-x
- * --btn-radius
- * --btn-focus-color
- * --btn-gap
- * --btn-hover-overlay
- *
- * Internal:
- * --btn-bg
- * --btn-fg
- * --btn-border
- * --btn-focus-ring-color
- * --btn-border-block-end-color
- * --btn-border-block-end-width
- * --spinner-width
- */
-
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.btn) {
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-}
-
-.btn {
-  --btn-font-size: var(--control-font-size);
-  --btn-min-size: var(--control-size);
-  --btn-pad-x: var(--control-pad-x, 1em);
-  --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral))));
-  --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg))));
-  --btn-border: var(--ui-border, var(--btn-default-border, transparent));
-  --btn-radius: var(--radius);
-  --btn-focus-color: var(--intent, var(--focus));
-  --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
-
-  /* Positioning context for indicators, overlays, and grouped states. */
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--btn-gap, 0.375em);
-  min-block-size: var(--btn-min-size);
-  padding-block: var(--space-20);
-  padding-block: max(var(--space-10), calc((var(--btn-min-size) - 1lh) / 2));
-  padding-inline: var(--btn-pad-x);
-  border: var(--border-width) solid var(--btn-border-color, var(--btn-border));
-  border-block-end-color: var(
-    --btn-border-block-end-color,
-    var(--btn-border-color, var(--btn-border))
-  );
-  border-block-end-width: var(--btn-border-block-end-width, var(--border-width));
-  border-radius: var(--btn-radius);
-  background: var(--btn-bg);
-  color: var(--btn-fg);
-  font: inherit;
-  font-size: var(--btn-font-size);
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background-color var(--duration),
-    border-color var(--duration),
-    color var(--duration),
-    box-shadow var(--duration),
-    transform var(--duration);
-}
 
-.btn.icon-only {
-  inline-size: var(--btn-min-size);
-  padding-inline: 0;
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  .btn {
-    --btn-focus-ring-color: color-mix(in oklch, var(--btn-focus-color) 28%, transparent);
+  /* Pointer focus must still signal in high-contrast mode, where the shared
+     box-shadow rings are disabled (--focus-ring-shadow: none). */
+  @media (forced-colors: active) {
+    :focus:not(:focus-visible) {
+      outline: var(--focus-outline);
+    }
   }
 }
 
-/* .solid/.soft/.outline are shared via variants.css. The baseline --btn-*
-   fallbacks make .btn solid by default; .ghost/.link are .btn-only variants. */
-.btn.ghost {
-  --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
-  --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. */
-.btn.outline,
-.btn.ghost,
-.btn.link {
-  --btn-hover-overlay: transparent;
-}
-
-/* Shared hover recipe — sets --ui-hover-bg consumed by the hover rule below.
-   Declared outside :hover: the variables resolve only when the hover rule
-   reads them, so the values are inert until interaction. */
-.btn:is(.outline, .ghost) {
-  --ui-hover-bg: var(--surface-subtle);
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  .btn:not(:where(.soft, .outline, .ghost, .link)) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
-  }
-
-  .btn.soft {
-    --ui-hover-bg: color-mix(
-      in oklch,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
-    );
-  }
-
-  .btn.outline {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
+@media print {
+  :root,
+  body {
+    /* Save some ink in dark mode */
+    color-scheme: light;
+    background: #fff;
+    color: #000;
   }
 
-  .btn.ghost {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--text)) 8%, transparent);
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid;
   }
 }
-
-/* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is set locally above;
-   the overlay darkening for solid/soft is .btn-specific. */
-.btn:not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--btn-bg));
-  box-shadow: inset 0 0 0 999px var(--btn-hover-overlay);
-}
-
-.btn:not(:where(:disabled, [aria-disabled="true"])):active {
-  transform: translateY(1px);
-}
-
-.btn.link {
-  --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
-  --ui-border: transparent;
-  --btn-radius: var(--radius-sm);
-  --btn-border-block-end-color: transparent;
-  --btn-border-block-end-width: var(--border-width);
-
-  min-block-size: auto;
-  padding-inline: 0;
-  border-color: transparent;
-  text-decoration: underline;
-  text-underline-offset: 0.18em;
-}
-
-/* .btn.circle needs no local rule: the .circle utility (utilities.css) loads
-   after components and overrides border-radius at equal specificity. */
-
-.btn.link:not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: transparent;
-  color: var(--intent, var(--text));
-  text-decoration-thickness: 0.12em;
-}
-
-.btn:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: 0 0 0 var(--focus-ring-width) var(--btn-focus-ring-color, var(--focus-ring));
-}
-
-.btn.link:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: 0.2em;
-  box-shadow: none;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-}
-
-/* Anchors have no native disabled state.
-   a.btn[aria-disabled="true"] only provides disabled styling and blocks pointer
-   activation. For a truly disabled link, remove href or prevent activation in
-   app code. */
-a.btn[aria-disabled="true"] {
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-  pointer-events: none;
-}
-
-/* Busy */
-.btn[aria-busy="true"]:not(:disabled) {
-  cursor: progress;
-}
-
-.btn[aria-busy="true"] > .spinner {
-  --spinner-width: 0.15em;
-}
-
-/* Toggle and current state.
-   State must outrank the shared .outline/.ghost hover recipes: a pressed or
-   current button keeps its intent background and foreground while hovered.
-   aria-current="page" is the pagination current-page marker; aria-pressed
-   covers toggle buttons. */
-.btn:is([aria-pressed="true"], [aria-current="page"]):not(.link) {
-  --btn-bg: var(--intent, var(--state-selected));
-  --btn-fg: var(--intent-fg, var(--state-selected-fg));
-  --btn-border: var(--intent, var(--state-selected));
-  --ui-hover-bg: var(--btn-bg);
-}
-
-@media (forced-colors: active) {
-  .btn {
-    border-color: ButtonText;
-    background: ButtonFace;
-    color: ButtonText;
-    box-shadow: none;
-  }
-
-  .btn.link {
-    border-color: transparent;
-    background: Canvas;
-    color: LinkText;
-  }
-
-  .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link) {
-    border-color: Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .btn:hover:not(:where(:disabled, [aria-disabled="true"], .link)) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-  }
-
-  .btn:disabled,
-  a.btn[aria-disabled="true"] {
-    border-color: GrayText;
-    background: Canvas;
-    color: GrayText;
-    forced-color-adjust: auto;
-  }
-}
-
-/*
- * Badges for compact labels, counts, and state hints.
- *
- * Soft by default. .solid for counters and notification badges. The dot
- * (.badge:empty) stays solid regardless — a soft dot is pointless.
- * Shared .outline variant stays available.
- *
- * Public hooks:
- * --badge-size
- * --badge-pad-x
- * --badge-font-size
- * --badge-dot-size
- * --badge-radius
- *
- * Internal:
- * --badge-bg
- * --badge-fg
- * --badge-border
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.badge) {
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-}
-
-.badge {
-  --badge-size: var(--density-compact-size);
-  --badge-pad-x: 0.55em;
-  --badge-font-size: 0.8125rem;
-  --badge-dot-size: 0.5rem;
-  --badge-bg: var(--ui-bg, var(--surface-subtle));
-  --badge-fg: var(--ui-fg, var(--intent, var(--text)));
-  --badge-border: var(--ui-border, var(--border));
-  --badge-radius: var(--radius-full);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35em;
-  inline-size: fit-content;
-  max-inline-size: 100%;
-  min-block-size: var(--badge-size);
-  padding-inline: var(--badge-pad-x);
-  border: var(--border-width) solid var(--badge-border);
-  border-radius: var(--badge-radius);
-  background: var(--badge-bg);
-  color: var(--badge-fg);
-  font-size: var(--badge-font-size);
-  font-weight: var(--font-weight-strong);
-  line-height: 1;
-  text-decoration: none;
-  white-space: nowrap;
-  transition:
-    background-color var(--duration),
-    border-color var(--duration),
-    color var(--duration),
-    box-shadow var(--duration);
-}
-
-/* Soft by default — duplicated here with @sync markers for check-sync.js
-   to guard, the same way alert.css guards its own soft recipe. */
-@supports (color: color-mix(in oklch, red, white)) {
-  .badge:where(:not(.solid, .outline)) {
-    /* @sync soft-recipe */
-    --badge-bg: color-mix(
-      in oklch,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
-    );
-    --badge-fg: var(--intent, var(--text));
-    --badge-border: color-mix(
-      in oklch,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
-    );
-    /* @sync soft-recipe */
-  }
-}
-
-.badge:empty {
-  --badge-size: var(--badge-dot-size);
-  --badge-bg: var(--intent, var(--neutral));
-  --badge-fg: var(--intent-fg, var(--neutral-fg));
-  --badge-border: transparent;
-  padding: 0;
-  border: 0;
-  inline-size: var(--badge-size);
-  block-size: var(--badge-size);
-}
-
-.badge > button {
-  display: inline-grid;
-  place-items: center;
-  flex: 0 0 auto;
-  min-inline-size: 1.5rem;
-  min-block-size: 1.5rem;
-  margin-block: -0.25rem;
-  margin-inline-start: -0.15em;
-  margin-inline-end: -0.45em;
-  padding: 0.25rem;
-  border: 0;
-  border-radius: var(--radius-full);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.badge > button:not(:disabled):hover {
-  background: var(--hover-overlay);
-}
-
-/* Hover recipes — sets --ui-hover-bg consumed by the hover rule below.
-   Declared outside :hover like button.css for the same reason. */
-:is(a.badge, button.badge).outline {
-  --ui-hover-bg: var(--surface-subtle);
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  :is(a.badge, button.badge):is(.solid, :empty) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
-  }
-
-  :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
-    --ui-hover-bg: color-mix(
-      in oklch,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
-    );
-  }
-
-  :is(a.badge, button.badge).outline {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
-  }
-}
-
-:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--badge-bg));
-}
-
-:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
-}
-
-button.badge {
-  cursor: pointer;
-}
-
-button.badge:disabled,
-.badge[aria-disabled="true"] {
-  opacity: var(--disabled-opacity);
-  cursor: not-allowed;
-}
-
-a.badge[aria-disabled="true"] {
-  pointer-events: none;
-}
-
-@media (forced-colors: active) {
-  .badge:empty {
-    background: ButtonText;
-  }
-
-  :where(a.badge, button.badge):hover:not(:where(:disabled, [aria-disabled="true"])) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-  }
-
-  .badge > button:not(:disabled):hover {
-    outline: var(--border-width) solid currentColor;
-    outline-offset: 1px;
-  }
-
-  button.badge:disabled,
-  .badge[aria-disabled="true"] {
-    border-color: GrayText;
-    background: Canvas;
-    color: GrayText;
-  }
-}
-
-/*
- * Alerts for inline feedback and status messages.
- *
- * Keeps alert defaults local while consuming the shared --ui-* variant
- * plumbing for emphasis.
- *
- * --alert-border-inline-start-color/-width are unset extension points, mirroring
- * --btn-border-block-end-* (button.css), for themes that give alerts a
- * callout-style colored flag on the leading edge instead of a uniform border.
- *
- * Public hooks:
- * --alert-pad-block
- * --alert-pad-inline
- * --alert-font-size
- * --alert-radius
- * --alert-icon-size
- * --alert-dismiss-size
- *
- * Internal:
- * --alert-bg
- * --alert-fg
- * --alert-border
- * --alert-dismiss-icon-size
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.alert) {
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-}
-
-.alert {
-  --alert-pad-block: var(--space-30);
-  --alert-pad-inline: var(--space-40);
-  --alert-font-size: var(--font-size-md);
-  --alert-icon-size: 1.25rem;
-  --alert-bg: var(--ui-bg, var(--surface-subtle));
-  --alert-fg: var(--ui-fg, var(--intent, var(--text)));
-  --alert-border: var(--ui-border, var(--border));
-
-  padding-block: var(--alert-pad-block);
-  padding-inline: var(--alert-pad-inline);
-  background: var(--alert-bg);
-  color: var(--alert-fg);
-  border: var(--border-width) solid var(--alert-border);
-  border-inline-start-color: var(--alert-border-inline-start-color, var(--alert-border));
-  border-inline-start-width: var(--alert-border-inline-start-width, var(--border-width));
-  border-radius: var(--alert-radius, var(--radius-lg));
-  font-size: var(--alert-font-size);
-}
-
-.alert > * {
-  min-inline-size: 0;
-}
-
-.alert > :first-child {
-  margin-block-start: 0;
-}
-
-.alert > :last-child {
-  margin-block-end: 0;
-}
-
-/* Alerts are soft by default. .solid and .outline need no local rules — the
-   shared variant plumbing in variants.css sets --ui-* that alert consumes. */
-@supports (color: color-mix(in oklch, red, white)) {
-  .alert:where(:not(.solid, .outline, .callout)) {
-    /* @sync soft-recipe */
-    --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
-    --ui-border: color-mix(
-      in oklch,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
-    );
-    /* @sync soft-recipe */
-  }
-}
-
-/* Decorative leading icon — use .alert-icon on the icon element. */
-.alert > .alert-icon {
-  display: inline-block;
-  flex: none;
-  inline-size: var(--alert-icon-size);
-  block-size: var(--alert-icon-size);
-  font-size: var(--alert-icon-size);
-  line-height: 1;
-  vertical-align: -0.125em;
-}
-
-/* Dismiss — compact close button for inline alerts. Transparent at rest with
-   a reduced opacity glyph so it stays secondary inside an already-colored
-   alert; hover reinforces it via the shared overlay. Uses the shared
-   --icon-close mask, so no icon font or text glyph is required in the markup.
-   Standard alerts place it as a direct trailing child; admonitions place it
-   inside .alert-title (see below). */
-.alert-dismiss {
-  --alert-dismiss-size: 1.75rem;
-  --alert-dismiss-icon-size: 0.875rem;
-
-  display: inline-grid;
-  place-items: center;
-  inline-size: var(--alert-dismiss-size);
-  block-size: var(--alert-dismiss-size);
-  flex: none;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius);
-  background: transparent;
-  color: currentColor;
-  opacity: 0.65;
-  cursor: pointer;
-}
-
-.alert-dismiss::before {
-  content: "";
-  inline-size: var(--alert-dismiss-icon-size);
-  block-size: var(--alert-dismiss-icon-size);
-  background: currentColor;
-  -webkit-mask: var(--icon-close) center / contain no-repeat;
-  mask: var(--icon-close) center / contain no-repeat;
-}
-
-@media (hover: hover) {
-  .alert-dismiss:hover {
-    background: var(--hover-overlay);
-    opacity: 1;
-  }
-}
-
-/* Grid anatomy — activated by a leading icon, a trailing dismiss button, or
-   both. Icon and dismiss are pinned to the outer columns; anything else (the
-   message content) flows into the remaining text column. */
-@supports selector(.alert:has(> *)) {
-  .alert:has(> .alert-icon, > .alert-dismiss) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: var(--items-align, start);
-    column-gap: var(--space-30);
-  }
-
-  .alert:has(> .alert-icon) {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
-
-  .alert:has(> .alert-icon) > .alert-icon {
-    grid-column: 1;
-    grid-row: 1 / -1;
-    display: inline-grid;
-    place-items: center;
-    margin-block-start: 0.125em;
-  }
-
-  .alert:has(> .alert-icon) > :not(.alert-icon, .alert-dismiss) {
-    grid-column: 2;
-  }
-
-  .alert:has(> .alert-dismiss) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .alert:has(> .alert-icon):has(> .alert-dismiss) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
-
-  .alert:has(> .alert-dismiss) > .alert-dismiss {
-    grid-column: -2 / -1;
-    grid-row: 1;
-  }
-}
-
-/* Links */
-.alert :where(a:not(.btn)) {
-  color: inherit;
-  font-weight: var(--font-weight-strong);
-}
-
-/* Forced colors: no override needed. The always-on border gets a forced
-   readable color, and text on a Highlight surface would trigger Chromium's
-   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. */
-.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)));
-}
-
-/* Admonition — structured static box with a tinted title bar and a body
-   that rests on the page surface. Not collapsible — use .accordion inside
-   the body if the content needs to be expandable. */
-.alert.admonition {
-  padding: 0;
-  display: block;
-  overflow: clip;
-  border-color: var(--intent, var(--border));
-}
-
-.alert.admonition > .alert-title {
-  display: flex;
-  align-items: center;
-  gap: var(--space-20);
-  padding-block: var(--alert-pad-block);
-  padding-inline: var(--alert-pad-inline);
-  border-start-start-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
-  border-start-end-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
-}
-
-/* Dismiss inside an admonition title bar rides the inline end. */
-.alert.admonition > .alert-title > .alert-dismiss {
-  margin-inline-start: auto;
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  .alert.admonition > .alert-title {
-    background: color-mix(
-      in oklch,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
-    );
-  }
-}
-
-@supports not (color: color-mix(in oklch, red, white)) {
-  .alert.admonition > .alert-title {
-    background: var(--intent, var(--neutral));
-    color: var(--intent-fg, var(--neutral-fg));
-  }
-}
-
-.alert.admonition > .alert-body {
-  padding-block: var(--alert-pad-block);
-  padding-inline: var(--alert-pad-inline);
-  background: var(--surface);
-  color: var(--text);
-}
-
-.alert.admonition > .alert-body > :first-child {
-  margin-block-start: 0;
-}
-
-.alert.admonition > .alert-body > :last-child {
-  margin-block-end: 0;
-}
-
-/*
- * Actions — a horizontal action-button cluster.
- *
- * Composes with .btn (or any inline element) and feeds layout via the shared
- * --gap token.
- *
- * Internal:
- * --gap (local value for the shared gap token)
- */
-.actions {
-  --gap: var(--space-20);
-
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.actions > li {
-  margin: 0;
-}
-
-
-/* Surfaces */
-/*
- * Cards provide a neutral raised surface for grouped content.
- *
- * Surface, border, radius, padding, density, and elevation stay local here.
- * Direct header/footer children are structural slots. Page layout remains the
- * job of markup and layout primitives outside the card.
- *
- * Public hooks:
- * --card-pad
- * --card-radius
- * --card-max-inline-size
- *
- * Child contract:
- * Direct .bleed children escape --card-pad (negative inset, wider media);
- * edge children inherit the card corners. .bleed must be a direct child.
- *
- * Internal:
- * --heading
- * --busy-overlay-bg
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.card) {
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-}
-
-.card {
-  --card-pad: var(--space-40);
-  --card-radius: var(--radius-lg);
-  --card-max-inline-size: none;
-
-  max-inline-size: var(--card-max-inline-size);
-  padding: var(--card-pad);
-  background: var(--ui-bg, var(--surface-raised));
-  color: var(--ui-fg, var(--text));
-  border: var(--border-width) solid var(--ui-border, var(--border));
-  border-radius: var(--card-radius);
-}
-
-.card > * {
-  min-inline-size: 0;
-}
-
-.card > :where(header, footer) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: var(--items-align, center);
-  justify-content: space-between;
-  gap: var(--space-30);
-  min-inline-size: 0;
-}
-
-.card > :where(header, footer) > * {
-  min-inline-size: 0;
-  margin-block: 0;
-}
-
-.card > header {
-  align-items: var(--items-align, flex-start);
-}
-
-.card > :first-child {
-  margin-block-start: 0;
-}
-
-.card > :last-child {
-  margin-block-end: 0;
-}
-
-.card.raised {
-  box-shadow: var(--shadow);
-}
-.card.subtle {
-  background: var(--surface-subtle);
-}
-.card.compact {
-  --card-pad: var(--space-20);
-}
-
-/* Full-bleed children */
-.card > .bleed {
-  margin-inline: calc(var(--card-pad) * -1);
-  max-inline-size: none;
-}
-
-.card > .bleed:first-child {
-  margin-block-start: calc(var(--card-pad) * -1);
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-}
-
-.card > .bleed:last-child {
-  margin-block-end: calc(var(--card-pad) * -1);
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
-}
-
-/* Media bleed */
-.card > :where(img, picture, video, canvas, svg).bleed {
-  display: block;
-  inline-size: calc(100% + var(--card-pad) * 2);
-  max-inline-size: none;
-}
-
-.card > picture.bleed {
-  overflow: hidden;
-}
-
-.card > picture.bleed > img {
-  display: block;
-  inline-size: 100%;
-  block-size: auto;
-}
-
-/* Padded structural bleed */
-.card > :where(header, footer, figure).bleed {
-  padding: var(--card-pad);
-}
-
-/*
- * 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;
-  transition: opacity var(--duration) var(--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) var(--ease),
-      display var(--duration) allow-discrete;
-  }
-}
-
-/*
- * Modal shell styling for native dialog elements.
- *
- * Spacing, radius, transitions, and focus treatment come from shared tokens.
- * Opening behavior and intent-specific decisions stay outside this component.
- *
- * Public hooks:
- * --modal-size
- * --dialog-viewport-gap
- * --dialog-icon-size
- * --dialog-icon-glyph-size
- *
- * Internal:
- * --dialog-close-icon-size
- * --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
-     doubled gap is spelled out with an additive calc. */
-  --dialog-viewport-gap-2x: calc(var(--dialog-viewport-gap) + var(--dialog-viewport-gap));
-
-  /* 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));
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--surface-raised);
-  color: var(--text);
-  box-shadow: var(--shadow);
-  padding: 0;
-  overflow: visible;
-  opacity: 0;
-  /*
-   * Keep the open dialog root untransformed. Fixed overlays mounted 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.
-   */
-  transform: translateY(0.35rem) scale(0.98);
-  transition:
-    opacity var(--duration),
-    transform var(--duration);
-}
-
-dialog.modal > form,
-dialog.modal > .stack {
-  display: grid;
-  gap: var(--space-40);
-  max-block-size: calc(var(--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. */
-@media (max-width: 30rem) {
-  dialog.modal {
-    --dialog-viewport-gap: var(--space-30);
-  }
-}
-
-dialog.modal.scrollable > form,
-dialog.modal.scrollable > .stack {
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  overflow: hidden;
-}
-
-dialog.modal.scrollable > form > :not(header, footer),
-dialog.modal.scrollable > .stack > :not(header, footer) {
-  min-block-size: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-dialog.modal header > :first-child,
-dialog.modal footer > :first-child {
-  margin-block-start: 0;
-}
-
-dialog.modal header > :last-child,
-dialog.modal footer > :last-child {
-  margin-block-end: 0;
-}
-
-/* The close button is anchored to the dialog at top inline-end, out of the
-   content flow; headers reserve inline room so titles never run under it. */
-dialog.modal > form > header,
-dialog.modal > .stack > header {
-  padding-inline-end: calc(var(--control-size) + var(--space-30));
-}
-
-dialog.modal footer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--gap);
-}
-
-/* Confirmation layout — a focused message followed by a visually distinct
-   action band. The media primitive owns icon/content alignment; this variant
-   only removes the standard form inset so both regions can own their padding. */
-dialog.modal.dialog-confirmation > form {
-  gap: 0;
-  padding: 0;
-}
-
-dialog.modal.dialog-confirmation > form > .media {
-  gap: var(--space-40);
-  padding: var(--space-50);
-}
-
-dialog.modal.dialog-confirmation > form > footer {
-  padding: var(--space-40) var(--space-50);
-  border-end-start-radius: calc(var(--radius-lg) - var(--border-width));
-  border-end-end-radius: calc(var(--radius-lg) - var(--border-width));
-  background: var(--surface-subtle);
-}
-
-/* Intent boundary — inherited intents do not tint the icon well. A local
-   intent plus .soft opts into the shared soft-variant recipe. */
-:where(.dialog-icon) {
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-}
-
-.dialog-icon {
-  --dialog-icon-size: 3rem;
-  --dialog-icon-glyph-size: 1.5rem;
-
-  display: inline-grid;
-  place-items: center;
-  inline-size: var(--dialog-icon-size);
-  block-size: var(--dialog-icon-size);
-  flex: none;
-  border-radius: var(--radius-full);
-  background: var(--ui-bg, var(--surface-subtle));
-  color: var(--ui-fg, var(--intent, var(--text-muted)));
-}
-
-.dialog-icon > * {
-  display: inline-grid;
-  place-items: center;
-  inline-size: var(--dialog-icon-glyph-size);
-  block-size: var(--dialog-icon-glyph-size);
-  font-size: var(--dialog-icon-glyph-size);
-  line-height: 1;
-}
-
-@media (max-width: 30rem) {
-  dialog.modal.dialog-confirmation > form > .media,
-  dialog.modal.dialog-confirmation > form > footer {
-    padding: var(--space-40);
-  }
-}
-
-dialog.modal[open] {
-  opacity: 1;
-  transform: none;
-}
-
-@starting-style {
-  dialog.modal[open] {
-    opacity: 0;
-    transform: translateY(0.35rem) scale(0.98);
-  }
-}
-
-dialog.modal::backdrop {
-  background: var(--backdrop-fill);
-  opacity: 0;
-  transition: opacity var(--duration);
-}
-
-@supports (transition-behavior: allow-discrete) {
-  dialog.modal {
-    transition:
-      opacity var(--duration),
-      transform var(--duration),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
-  }
-
-  dialog.modal::backdrop {
-    transition:
-      opacity var(--duration),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
-  }
-}
-
-dialog.modal[open]::backdrop {
-  opacity: 1;
-}
-
-html.has-modal-open {
-  overflow: hidden;
-}
-
-html.has-modal-open.had-scrollbar {
-  scrollbar-gutter: stable;
-}
-
-@starting-style {
-  dialog.modal[open]::backdrop {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  dialog.modal.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
-  }
-
-  ::view-transition-group(actual-dialog) {
-    animation-duration: var(--duration);
-    animation-timing-function: var(--ease);
-  }
-}
-
-@keyframes actual-dialog-static {
-  0%,
-  100% {
-    transform: none;
-  }
-
-  35% {
-    transform: translateX(-0.35rem);
-  }
-
-  70% {
-    transform: translateX(0.35rem);
-  }
-}
-
-@media (forced-colors: active) {
-  dialog.modal {
-    border-color: ButtonText;
-    background: Canvas;
-    color: CanvasText;
-    box-shadow: none;
-  }
-
-  dialog.modal::backdrop {
-    background: Canvas;
-  }
-
-  .dialog-icon {
-    border: var(--border-width) solid CanvasText;
-  }
-}
-
-/* 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 {
-  --dialog-close-icon-size: 1rem;
-
-  display: inline-grid;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  cursor: pointer;
-
-  /* Out of flow, anchored to the positioned dialog surface, not the header or
-     any scroll container inside it. */
-  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);
-}
-
-.dialog-close::before,
-.drawer-close::before {
-  content: "";
-  inline-size: var(--dialog-close-icon-size);
-  block-size: var(--dialog-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) {
-  .dialog-close:hover,
-  .drawer-close:hover {
-    box-shadow: inset 0 0 0 999px var(--hover-overlay);
-    color: var(--text);
-  }
-}
-
-.dialog-close:active,
-.drawer-close:active {
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
-}
-
-.dialog-close:focus-visible,
-.drawer-close:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-/*
- * Drawer — modal side-sheet built on the native dialog element.
- *
- * Top-layer rendering, ::backdrop, Escape, and modal focus come from the
- * native dialog. CSS owns progressive enter/exit motion where browsers support
- * discrete display/overlay transitions. The drawer is a layout shell only —
- * navigation content inside uses .nav-link and .accordion, which carry their
- * own link/summary styling.
- *
- * Public hooks:
- * --drawer-size
- * --drawer-pad
- *
- * Internal:
- * --drawer-closed-translate (side/RTL positioning state)
- */
-dialog.drawer {
-  --drawer-size: 20rem;
-  --drawer-pad: var(--space-40);
-  --drawer-closed-translate: -100%;
-
-  /* Keep the surface anchored to the viewport in the top layer. This also
-     provides the containing block for the absolutely positioned close button.
-     A percentage height resolves against the fixed containing viewport, while
-     dynamic viewport units can be stale in embedded previews. */
-  position: fixed;
-  inset-block-start: 0;
-
-  inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size));
-  block-size: 100%;
-  max-inline-size: none;
-  max-block-size: 100%;
-  margin: 0;
-  padding: var(--drawer-pad);
-  border: 0;
-  border-inline-end: var(--border-width) solid var(--border);
-  border-radius: 0;
-  background: var(--surface-raised);
-  color: var(--text);
-  box-shadow: var(--shadow);
-  opacity: 0;
-  transform: translateX(var(--drawer-closed-translate));
-  transition:
-    opacity var(--duration-slow),
-    transform var(--duration-slow);
-}
-
-dialog.drawer[open] {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  gap: var(--space-40);
-  opacity: 1;
-  transform: translateX(0);
-}
-
-/* Backdrop color sourced from components/surface.css so it matches .modal
-   and .surface-backdrop across the dialog family. */
-dialog.drawer::backdrop {
-  background: var(--backdrop-fill);
-  opacity: 0;
-  transition: opacity var(--duration-slow);
-}
-
-dialog.drawer[data-side="end"] {
-  --drawer-closed-translate: 100%;
-
-  margin-inline-start: auto;
-  margin-inline-end: 0;
-  border-inline-end: 0;
-  border-inline-start: var(--border-width) solid var(--border);
-}
-
-dialog.drawer[open]::backdrop {
-  opacity: 1;
-}
-
-@starting-style {
-  dialog.drawer[open] {
-    opacity: 0;
-    transform: translateX(var(--drawer-closed-translate));
-  }
-
-  dialog.drawer[open]::backdrop {
-    opacity: 0;
-  }
-}
-
-/* Scrollable navigation region inside the drawer. */
-dialog.drawer nav {
-  min-block-size: 0;
-  overflow-y: auto;
-}
-
-@supports (transition-behavior: allow-discrete) {
-  dialog.drawer {
-    transition:
-      opacity var(--duration-slow),
-      transform var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
-  }
-
-  dialog.drawer::backdrop {
-    transition:
-      opacity var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
-  }
-}
-
-/* RTL: swap closed transform directions so the drawer slides from the correct
-   inline side. */
-[dir="rtl"] dialog.drawer {
-  --drawer-closed-translate: 100%;
-}
-
-[dir="rtl"] dialog.drawer[data-side="end"] {
-  --drawer-closed-translate: -100%;
-}
-
-@media (forced-colors: active) {
-  dialog.drawer::backdrop {
-    background: Canvas;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  dialog.drawer.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
-  }
-}
-
-/* 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. */
-dialog.drawer > header,
-dialog.drawer > form > header {
-  padding-inline-end: calc(var(--control-size) + var(--space-30));
-}
-
-
-/* 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.
- *
- * 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"].
- * --surface-anchor-width is set by surface.js while an open flyout is positioned.
- *
- * Public hooks:
- * --flyout-inline-size
- * --flyout-max-inline-size
- *
- * Internal:
- * --menu-item-size (derived from --control-size for menu rows)
- * --available-height (measured by floating.js)
- * --surface-anchor-width (measured by surface.js)
- */
-
-.flyout-trigger {
-  position: relative;
-  display: inline-block;
-}
-
-/* Stretch: for a flyout trigger that must span its container — e.g. the
-   last row of a full-width sidebar nav list. Stretches both the
-   positioning wrapper and its trigger control. Named for the effect
-   (stretch to fill), not the display value, to avoid reading like a
-   generic display-block utility. */
-.flyout-trigger.stretch {
-  display: block;
-  inline-size: 100%;
-}
-
-.flyout-trigger.stretch > [aria-haspopup="menu"] {
-  inline-size: 100%;
-}
-
-.flyout {
-  --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. */
-  position: absolute;
-  inset-block-start: calc(100% + var(--space-10));
-  inset-inline-start: 0;
-  display: grid;
-  gap: var(--space-10);
-  inline-size: var(--flyout-inline-size, max-content);
-  min-inline-size: min(
-    var(--surface-anchor-width, 0px),
-    min(var(--flyout-max-inline-size, 20rem), calc(var(--viewport-inline) - var(--space-60)))
-  );
-  max-inline-size: min(
-    var(--flyout-max-inline-size, 20rem),
-    calc(var(--viewport-inline) - var(--space-60))
-  );
-  max-block-size: min(
-    24rem,
-    var(--available-height, calc(var(--viewport-block) - var(--space-60)))
-  );
-  overflow: auto;
-  margin: 0;
-  padding: var(--space-10);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface-raised);
-  box-shadow: var(--shadow-popout);
-  list-style: none;
-  opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease),
-    translate var(--duration-fast) var(--ease);
-}
-
-.flyout.is-open:not(.is-sheet) {
-  inset: auto;
-}
-
-@starting-style {
-  .flyout.is-open {
-    opacity: 0;
-    scale: 0.98;
-  }
-}
-
-/* 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);
-  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;
-}
-
-.flyout[hidden] {
-  display: none;
-  opacity: 0;
-  scale: 0.98;
-}
-
-.flyout.is-sheet[hidden] {
-  scale: 1;
-  translate: 0 var(--space-30);
-}
-
-@starting-style {
-  .flyout.is-sheet.is-open {
-    scale: 1;
-    translate: 0 var(--space-30);
-  }
-}
-
-@supports (transition-behavior: allow-discrete) {
-  .flyout {
-    transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
-      translate var(--duration-fast) var(--ease),
-      display var(--duration-fast) allow-discrete;
-  }
-}
-
-.flyout > li {
-  margin: 0;
-}
-
-.flyout > :where(section, footer) {
-  min-inline-size: 0;
-  padding: var(--space-20);
-}
-
-.flyout > section > :where(h1, h2, h3, h4, h5, h6) {
-  margin: 0;
-  color: var(--text-muted);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
-}
-
-.flyout > section > ul {
-  display: grid;
-  gap: var(--space-10);
-  margin: var(--space-10) 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.flyout > section > ul > li {
-  margin: 0;
-}
-
-/* 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. */
-
-/*
- * Menu — action list primitive consumed by flyout and context-menu.
- *
- * Strict anatomy: .menu > li > .menu-item. Separators and section labels
- * sit directly under .menu as siblings of <li>.
- *
- * Public hooks:
- * --menu-item-icon-size
- */
-
-.menu {
-  display: grid;
-  gap: var(--space-10);
-  margin: 0;
-  padding: var(--space-10);
-  list-style: none;
-}
-
-.menu > li {
-  margin: 0;
-}
-
-.menu-item {
-  --menu-item-icon-size: 1.25em;
-
-  display: flex;
-  align-items: center;
-  gap: var(--space-20);
-  inline-size: 100%;
-  min-block-size: var(--menu-item-size, var(--control-size));
-  padding-inline: var(--space-20);
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  text-align: start;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.menu-item-icon {
-  display: grid;
-  flex: 0 0 var(--menu-item-icon-size);
-  inline-size: var(--menu-item-icon-size);
-  place-items: center;
-}
-
-.menu-item-text {
-  flex: 1;
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.menu-item-end {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-10);
-  margin-inline-start: auto;
-  color: var(--text-muted);
-}
-
-/* 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;
-  flex: 0 0 var(--menu-item-icon-size);
-  inline-size: var(--menu-item-icon-size);
-  place-items: center;
-}
-
-.menu-item[role="menuitemcheckbox"]::before {
-  content: "";
-}
-
-.menu-item[role="menuitemcheckbox"][aria-checked="true"]::before {
-  content: "✓";
-}
-
-.menu-item[role="menuitemcheckbox"][aria-checked="mixed"]::before {
-  content: "−";
-}
-
-.menu-item[role="menuitemradio"]::before {
-  content: "○";
-}
-
-.menu-item[role="menuitemradio"][aria-checked="true"]::before {
-  content: "●";
-}
-
-.menu-item:focus-visible {
-  background: var(--surface-subtle);
-}
-
-.menu-item:hover:not(:where(:disabled, [aria-disabled="true"])) {
-  background: var(--surface-subtle);
-}
-
-.menu-item:is(:disabled, [aria-disabled="true"]) {
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-}
-
-.menu-label {
-  padding: var(--space-20);
-  color: var(--text-muted);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
-}
-
-.menu-separator {
-  margin: 0;
-  border: 0;
-  border-block-start: var(--border-width) solid var(--border);
-}
-
-@media (forced-colors: active) {
-  .menu-item:focus-visible {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: -1px;
-  }
-}
-
-/*
- * 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.
- *
- * Public hooks:
- * --tooltip-bg
- * --tooltip-fg
- * --tooltip-arrow-size
- *
- * Internal:
- * --arrow-x (arrow position, written by floating.js)
- * --arrow-y (arrow position, written by floating.js)
- */
-.tooltip {
-  --tooltip-bg: var(--surface-solid);
-  --tooltip-fg: var(--surface);
-  --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);
-  background: var(--tooltip-bg);
-  color: var(--tooltip-fg);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-  overflow-wrap: anywhere;
-  pointer-events: auto;
-  user-select: none;
-  opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease);
-}
-
-.tooltip[hidden] {
-  display: none;
-  opacity: 0;
-  scale: 0.96;
-}
-
-@starting-style {
-  .tooltip:not([hidden]) {
-    opacity: 0;
-    scale: 0.96;
-  }
-}
-
-@supports (transition-behavior: allow-discrete) {
-  .tooltip {
-    transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
-      display var(--duration-fast) allow-discrete;
-  }
-}
-
-/* ── Arrow — clipped triangle ──────────────────────── */
-
-.tooltip::before {
-  content: "";
-  position: absolute;
-  inline-size: calc(var(--tooltip-arrow-size) * 2);
-  block-size: var(--tooltip-arrow-size);
-  background: var(--tooltip-bg);
-}
-
-.tooltip[data-placement^="top"]::before {
-  bottom: calc(-0.98 * var(--tooltip-arrow-size));
-  left: var(--arrow-x, 50%);
-  translate: -50% 0;
-  clip-path: polygon(50% 100%, 0 0, 100% 0);
-}
-
-.tooltip[data-placement^="bottom"]::before {
-  top: calc(-0.98 * var(--tooltip-arrow-size));
-  left: var(--arrow-x, 50%);
-  translate: -50% 0;
-  clip-path: polygon(50% 0, 0 100%, 100% 100%);
-}
-
-.tooltip[data-placement^="left"]::before {
-  right: calc(-0.98 * var(--tooltip-arrow-size));
-  top: var(--arrow-y, 50%);
-  inline-size: var(--tooltip-arrow-size);
-  block-size: calc(var(--tooltip-arrow-size) * 2);
-  translate: 0 -50%;
-  clip-path: polygon(100% 50%, 0 0, 0 100%);
-}
-
-.tooltip[data-placement^="right"]::before {
-  left: calc(-0.98 * var(--tooltip-arrow-size));
-  top: var(--arrow-y, 50%);
-  inline-size: var(--tooltip-arrow-size);
-  block-size: calc(var(--tooltip-arrow-size) * 2);
-  translate: 0 -50%;
-  clip-path: polygon(0 50%, 100% 0, 100% 100%);
-}
-
-@media (forced-colors: active) {
-  .tooltip {
-    --tooltip-bg: Canvas;
-    --tooltip-fg: CanvasText;
-  }
-
-  .tooltip::before {
-    display: none;
-  }
-}
-
-
-/* Disclosure */
-/*
- * Accordion disclosures built on native details and summary.
- *
- * Keeps the clickable summary affordance aligned and usable without JavaScript
- * or demo styles. Decorative palettes and custom markers belong outside the
- * base component.
- *
- * Public hooks:
- * --accordion-radius
- * --accordion-marker-color
- */
-.accordion {
-  --accordion-radius: var(--radius);
-  --accordion-marker-color: var(--text-muted);
-
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--accordion-radius);
-  background: var(--surface-raised);
-}
-
-.accordion > details + details {
-  border-block-start: var(--border-width) solid var(--border);
-}
-
-.accordion summary {
-  display: flex;
-  align-items: center;
-  gap: var(--space-30);
-  cursor: pointer;
-  list-style: none;
-  padding: var(--space-40);
-  color: var(--text);
-  font-weight: var(--font-weight-bold);
-}
-
-.accordion summary:hover {
-  color: var(--primary);
-}
-
-.accordion summary::-webkit-details-marker {
-  display: none;
-}
-
-.accordion summary::after {
-  content: "";
-  flex: 0 0 auto;
-  margin-inline-start: auto;
-  inline-size: 1rem;
-  block-size: 1rem;
-  background-color: var(--accordion-marker-color);
-  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
-  mask: var(--icon-chevron) center / contain no-repeat;
-  transition: transform var(--duration);
-}
-
-.accordion details[open] summary::after {
-  transform: rotate(180deg);
-}
-
-.accordion details > summary + * {
-  padding-block: 0 var(--space-40);
-  padding-inline: var(--space-40);
-  color: var(--text-muted);
-  margin-block: 0;
-}
-
-.accordion details[open] > summary + * {
-  padding-block-start: var(--space-10);
-}
-
-.accordion details > summary + * > :first-child {
-  margin-block-start: 0;
-}
-
-.accordion details > summary + ul,
-.accordion details > summary + ol {
-  margin: 0;
-  padding-inline-start: 2rem;
-}
-
-@media (forced-colors: active) {
-  .accordion {
-    --accordion-marker-color: CanvasText;
-  }
-}
-
-
-/* Feedback */
-/*
- * Spinner — compact loading feedback.
- *
- * Uses currentColor so it adapts to buttons, alerts, badges, and text. The
- * [aria-busy] overlay composition lives in components/busy.css.
- *
- * Public hooks:
- * --spinner-size
- * --spinner-width
- * --spinner-track
- * --spinner-value
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.spinner) {
-  --intent: initial;
-}
-
-.spinner {
-  --spinner-size: 1em;
-  --spinner-width: 0.125em;
-  --spinner-track: currentColor;
-  --spinner-value: transparent;
-
-  color: var(--intent, currentColor);
-  display: inline-block;
-  flex-shrink: 0;
-  inline-size: var(--spinner-size);
-  block-size: var(--spinner-size);
-  border: var(--spinner-width) solid var(--spinner-track);
-  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;
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  .spinner {
-    --spinner-track: color-mix(in oklch, currentColor, transparent 70%);
-    --spinner-value: currentColor;
-    opacity: 1;
-  }
-}
-
-.spinner.sm {
-  --spinner-size: 0.75em;
-}
-
-.spinner.lg {
-  --spinner-size: 2rem;
-  --spinner-width: 3px;
-}
-
-@keyframes actual-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/*
- * Skeleton placeholders for loading states.
- *
- * Shows approximate loading structure without implying real content hierarchy.
- * Geometry, animation, and color stay theme-aware.
- *
- * Public hooks:
- * --skeleton-size
- * --skeleton-width
- * --skeleton-radius
- * --skeleton-track
- * --skeleton-highlight
- */
-.skeleton {
-  --skeleton-size: 1rem;
-  --skeleton-width: 100%;
-  --skeleton-radius: var(--radius);
-  --skeleton-track: var(--surface-subtle);
-  --skeleton-highlight: var(--surface-raised);
-
-  display: block;
-  inline-size: var(--skeleton-width);
-  max-inline-size: 100%;
-  block-size: var(--skeleton-size);
-  border-radius: var(--skeleton-radius);
-  background:
-    linear-gradient(90deg, var(--skeleton-track), var(--skeleton-highlight), var(--skeleton-track))
-    0 0 / 200% 100%;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .skeleton {
-    animation: actual-skeleton var(--duration-shimmer) ease-in-out infinite;
-  }
-}
-
-.skeleton[data-shape="text"] {
-  --skeleton-size: 0.85rem;
-  --skeleton-width: 32rem;
-}
-
-.skeleton[data-shape="title"] {
-  --skeleton-size: 1.4rem;
-  --skeleton-width: 18rem;
-}
-
-.skeleton[data-shape="avatar"] {
-  --skeleton-size: var(--avatar-size, 2.25rem);
-  --skeleton-width: var(--skeleton-size);
-  --skeleton-radius: var(--radius-full);
-
-  flex: 0 0 auto;
-}
-
-.skeleton[data-shape="box"] {
-  --skeleton-size: 8rem;
-}
-
-@media (forced-colors: active) {
-  .skeleton {
-    border: var(--border-width) solid ButtonText;
-    background: GrayText;
-  }
-}
-
-@keyframes actual-skeleton {
-  from {
-    background-position: 200% 0;
-  }
-
-  to {
-    background-position: -200% 0;
-  }
-}
-
-/*
- * Busy overlay — non-button loading state.
- *
- * A non-button element with aria-busy="true" and a direct last-child .spinner
- * shows that spinner as a centered overlay over a faded surface. Buttons keep
- * their spinners inline (e.g. .btn[aria-busy] > .spinner stays inline-flex).
- *
- * Public hooks:
- * --busy-overlay-bg
- *
- * Internal:
- * --spinner-size (overlay copy of the shared spinner hook)
- */
-[aria-busy] > .spinner:last-child {
-  display: none;
-}
-
-[aria-busy="true"] > .spinner:last-child {
-  display: inline-block;
-}
-
-@supports selector([aria-busy="true"]:has(> .spinner:last-child)) {
-  [aria-busy="true"]:not(.btn):has(> .spinner:last-child) {
-    position: relative;
-  }
-
-  [aria-busy="true"]:not(.btn):has(> .spinner:last-child)::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    border-radius: inherit;
-    background: var(--busy-overlay-bg, var(--surface));
-  }
-
-  [aria-busy="true"]:not(.btn) > .spinner:last-child {
-    --spinner-size: 2rem;
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    margin: auto;
-    display: block;
-  }
-}
-
-@supports (selector([aria-busy="true"]:has(> .spinner:last-child))) and
-  (color: color-mix(in oklch, red, white)) {
-  [aria-busy="true"]:not(.btn):has(> .spinner:last-child)::before {
-    background: color-mix(in oklch, var(--busy-overlay-bg, var(--surface)), transparent 20%);
-  }
-}
-
-/*
- * Progress — native progress bar with theme-aware track and value.
- *
- * Consumes the shared --intent/--primary for the value bar and --bar-height
- * for thickness. Indeterminate state animates a shimmer using --duration-shimmer.
- *
- * Public hooks:
- * --progress-track
- * --progress-value
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.progress) {
-  --intent: initial;
-}
-
-.progress {
-  --progress-track: var(--surface-subtle);
-  --progress-value: var(--intent, var(--primary));
-
-  appearance: none;
-  -webkit-appearance: none;
-  display: block;
-  inline-size: 100%;
-  block-size: var(--bar-height);
-  overflow: hidden;
-  border: 0;
-  border-radius: var(--radius-full);
-  background: var(--progress-track);
-}
-
-.progress::-webkit-progress-bar {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-  background: var(--progress-track);
-}
-
-.progress::-webkit-progress-value {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-  background: var(--progress-value);
-}
-
-.progress::-moz-progress-bar {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-  background: var(--progress-value);
-}
-
-/* Indeterminate progress */
-.progress:indeterminate {
-  background:
-    linear-gradient(to right, var(--progress-value) 30%, var(--progress-track) 30%) top left / 150%
-    150% no-repeat,
-    var(--progress-track);
-}
-
-.progress:indeterminate::-webkit-progress-bar {
-  background: transparent;
-}
-
-.progress:indeterminate::-webkit-progress-value {
-  background: transparent;
-}
-
-.progress:indeterminate::-moz-progress-bar {
-  background: transparent;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .progress:indeterminate {
-    animation: actual-progress-indeterminate var(--duration-shimmer) ease-in-out infinite;
-  }
-
-  :where([dir="rtl"] .progress:indeterminate) {
-    animation-direction: reverse;
-  }
-}
-
-@keyframes actual-progress-indeterminate {
-  0% {
-    background-position: 200% 0;
-  }
-
-  20% {
-    background-position: 100% 0;
-  }
-
-  80% {
-    background-position: -100% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@media (forced-colors: active) {
-  .progress::-webkit-progress-value,
-  .progress:indeterminate::-webkit-progress-value {
-    background: Highlight;
-  }
-
-  .progress::-moz-progress-bar,
-  .progress:indeterminate::-moz-progress-bar {
-    background: Highlight;
-  }
-}
-
-/*
- * Status bar — singleton floating status area.
- *
- * One element in the HTML, empty by default, hidden when :empty but kept in the
- * accessibility tree so it stays a reliable live region. JavaScript only sets
- * text content; the visual shows and hides with the content.
- *
- * Consumes intent like badge or alert. No need for status-bar-specific modifier
- * classes — .danger / .success / .warning / .neutral from intents.css drive
- * the coloring via --intent / --intent-fg. status.js applies these as plain
- * classes on the target; it does not know their names or that they exist.
- *
- * CSS API:            .status-bar
- * JS target contract:  [data-status][role="status"]
- * Normally combined, but they describe separate concerns.
- *
- * Internal:
- * --status-bg
- * --status-fg
- */
-
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.status-bar) {
-  --intent: initial;
-  --intent-fg: initial;
-}
-
-.status-bar {
-  --status-bg: var(--intent, var(--text));
-  --status-fg: var(--intent-fg, var(--surface));
-
-  position: fixed;
-  inset-block-end: var(--space-40);
-  inset-inline: var(--space-40);
-  z-index: var(--z-status);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-20);
-
-  inline-size: fit-content;
-  max-inline-size: min(calc(var(--viewport-inline) - var(--space-60)), 32rem);
-  margin-inline: auto;
-  overflow-wrap: anywhere;
-
-  padding-block: var(--space-20);
-  padding-inline: var(--space-30);
-
-  border-radius: var(--radius-full);
-  background: var(--status-bg);
-  color: var(--status-fg);
-  box-shadow: var(--shadow-popout);
-
-  opacity: 1;
-  scale: 1;
-  translate: 0 0;
-  pointer-events: none;
-
-  transition:
-    opacity var(--duration-slow) var(--ease),
-    scale var(--duration-slow) var(--ease),
-    translate var(--duration-slow) var(--ease);
-}
-
-.status-bar:empty {
-  opacity: 0;
-  scale: 0.96;
-  translate: 0 var(--space-20);
-  pointer-events: none;
-}
-
-
-/* Display */
-/*
- * Avatars for initials, images, links, and buttons.
- *
- * The visual box stays the same across semantic elements. Grouping and status
- * dots (an empty .badge child) compose around the avatar without changing its
- * meaning.
- *
- * Public hooks:
- * --avatar-size
- * --avatar-radius
- * --avatar-font-size
- * --avatar-stack-size
- * --avatar-stack-font-size
- * --avatar-stack-overlap
- * --avatar-stack-ring
- *
- * Internal:
- * --avatar-bg
- * --avatar-fg
- * --avatar-status-translate-x
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.avatar) {
-  --intent: initial;
-  --intent-fg: initial;
-}
-
-.avatar {
-  --avatar-size: var(--avatar-stack-size, 2.25rem);
-  --avatar-radius: var(--radius-full);
-  --avatar-font-size: var(--avatar-stack-font-size, var(--font-size-sm));
-  --avatar-bg: var(--intent, var(--surface-subtle));
-  --avatar-fg: var(--intent-fg, var(--tone-fg, var(--text-muted)));
-
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  inline-size: var(--avatar-size);
-  block-size: var(--avatar-size);
-  overflow: visible;
-  padding: 0;
-  border: 0;
-  border-radius: var(--avatar-radius);
-  background: var(--avatar-bg);
-  color: var(--avatar-fg);
-  font: inherit;
-  font-size: var(--avatar-font-size);
-  font-weight: var(--font-weight-strong);
-  line-height: 1;
-  text-decoration: none;
-  vertical-align: middle;
-  user-select: none;
-  transition:
-    box-shadow var(--duration),
-    opacity var(--duration),
-    transform var(--duration);
-}
-
-/* Forced colors wipe the background and the stack ring (box-shadow), so the
-   shape needs a real border to stay visible. */
-@media (forced-colors: active) {
-  .avatar {
-    border: var(--border-width) solid CanvasText;
-  }
-
-  :where(a.avatar, button.avatar)::after {
-    display: none;
-  }
-}
-
-.avatar > :first-child:not(:where(img, picture, .badge)) {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 100%;
-  block-size: 100%;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.avatar > img,
-.avatar > picture {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.avatar > img,
-.avatar > picture > img {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-  border-radius: inherit;
-}
-
-.avatar > picture > img {
-  display: block;
-}
-
-button.avatar {
-  appearance: none;
-  cursor: pointer;
-}
-
-:where(a.avatar, button.avatar)::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: var(--hover-overlay);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--duration);
-}
-
-:where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):hover::after {
-  opacity: 1;
-}
-
-:where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):active {
-  transform: translateY(1px);
-}
-
-button.avatar:disabled,
-a.avatar[aria-disabled="true"] {
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-}
-
-a.avatar[aria-disabled="true"] {
-  pointer-events: none;
-}
-
-.avatar.sm {
-  --avatar-stack-size: 1.75rem;
-  --avatar-stack-font-size: var(--font-size-xs);
-}
-
-.avatar.lg {
-  --avatar-stack-size: 3rem;
-  --avatar-stack-font-size: var(--font-size-lg);
-}
-
-/* Status dot: an empty .badge positioned at the avatar's bottom-end corner.
-   The dot conveys no text — always pair it with an aria-label on the badge. */
-.avatar > .badge:empty {
-  --avatar-status-translate-x: 50%;
-
-  position: absolute;
-  inset-block-end: var(--indicator-offset);
-  inset-inline-end: var(--indicator-offset);
-  z-index: 1;
-  box-shadow: 0 0 0 2px var(--indicator-ring);
-  transform: translate(var(--avatar-status-translate-x), 50%);
-}
-
-.avatar:dir(rtl) > .badge:empty {
-  --avatar-status-translate-x: -50%;
-}
-
-/* Avatar stack — explicit class for overlapping avatar groups.
-   Does not rely on role="group" auto-detection. */
-.avatar-stack {
-  --avatar-stack-overlap: calc(var(--avatar-stack-size, 2.25rem) / -4);
-  --avatar-stack-ring: 2px;
-
-  display: inline-flex;
-  align-items: center;
-}
-
-.avatar-stack.sm {
-  --avatar-stack-size: 1.75rem;
-  --avatar-stack-font-size: var(--font-size-xs);
-}
-
-.avatar-stack.lg {
-  --avatar-stack-size: 3rem;
-  --avatar-stack-font-size: var(--font-size-lg);
-}
-
-@supports selector(:has(> .avatar)) {
-  .avatar-stack:has(> .avatar.sm) {
-    --avatar-stack-size: 1.75rem;
-    --avatar-stack-font-size: var(--font-size-xs);
-  }
-
-  .avatar-stack:has(> .avatar.lg) {
-    --avatar-stack-size: 3rem;
-    --avatar-stack-font-size: var(--font-size-lg);
-  }
-}
-
-.avatar-stack > .avatar {
-  box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface);
-}
-
-.avatar-stack > .avatar + .avatar {
-  margin-inline-start: var(--avatar-stack-overlap);
-}
-
-.avatar-stack > .avatar:is(:hover, :focus-visible) {
-  z-index: 1;
-}
-
-/*
- * Key — keyboard keys and shortcut tokens for UI chrome.
- *
- * Use .key outside prose. Plain kbd inside .prose gets the same visual
- * treatment from prose.css so authored content stays convenient.
- *
- * Visual twin of .prose kbd (prose.css) — keep the two recipes in sync.
- */
-.key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: 1.75em;
-  min-block-size: 1.6em;
-  padding-inline: 0.45em;
-  border: var(--border-width) solid var(--border);
-  border-block-end-width: calc(var(--border-width) * 2);
-  border-radius: var(--radius-sm);
-  background: var(--surface-raised);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-  vertical-align: 0.08em;
-}
-
-/*
- * Overline — editorial small-cap label for section openers.
- *
- * Base form is unstyled chrome that takes its surrounding color. Add .pill for
- * the bordered rounded shape, and combine with an intent class (.primary,
- * .success, etc.) to tint the text, border, and background.
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.overline) {
-  --intent: initial;
-}
-
-.overline {
-  align-self: flex-start;
-  color: var(--text-muted);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.overline.pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
-  padding-inline: 0.6em;
-  padding-block: 0.25em;
-  color: var(--intent, var(--text-muted));
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-full);
-  background: var(--surface);
-}
-
-/* Tinted pill surface where color-mix is available; the flat fallback above
-   keeps a readable bordered pill everywhere else. */
-@supports (color: color-mix(in oklch, red, white)) {
-  .overline.pill {
-    border-color: color-mix(in oklch, var(--intent, var(--border)) 35%, var(--border));
-    background: color-mix(in oklch, var(--intent, transparent) 6%, var(--surface));
-  }
-}
-
-
-/* Navigation */
-/*
- * Navbar — top-level navigation bar.
- *
- * .navbar is a horizontal bar; .navbar-brand is the brand link; .navbar-nav is
- * the inline link list using .nav-link items. .nav-list is the vertical nav
- * list shared with .drawer, fed by the shared --gap token.
- *
- * Internal:
- * --gap (local value for the shared gap token)
- */
-.navbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--gap);
-  padding-block: var(--space-30);
-  padding-inline: var(--space-40);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--surface-raised);
-  color: var(--text);
-}
-
-.navbar-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-20);
-  color: var(--text);
-  font-weight: var(--font-weight-bold);
-  text-decoration: none;
-}
-
-.navbar-brand:focus-visible {
-  border-radius: var(--radius-sm);
-}
-
-.navbar-nav {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.nav-link {
-  display: inline-flex;
-  align-items: center;
-  min-block-size: var(--control-size-sm);
-  padding-inline: var(--space-20);
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  font-weight: var(--font-weight-medium);
-  text-decoration: none;
-}
-
-.nav-link:where([aria-current]:not([aria-current="false"])) {
-  background: var(--surface-subtle);
-  color: var(--text);
-}
-
-.nav-link:hover {
-  background: var(--surface-subtle);
-  color: var(--text);
-}
-
-/* Nav list — a vertical navigation list. Used by .drawer for stacked links. */
-.nav-list {
-  display: grid;
-  --gap: var(--space-20);
-  gap: var(--gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.nav-list > li {
-  margin: 0;
-}
-
-@media (forced-colors: active) {
-  .nav-link:where([aria-current]:not([aria-current="false"])) {
-    outline: var(--border-width) solid Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .nav-link:hover:not(:where([aria-current]:not([aria-current="false"]))) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-    background: Canvas;
-    color: CanvasText;
-  }
-}
-
-/*
- * Breadcrumb — current-location trail from the site root.
- *
- * Inline list separated by "/". Mark the current page with `aria-current="page"`
- * either on the item or on the current link.
- */
-.breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  color: var(--text-subtle);
-  font-size: var(--font-size-sm);
-  list-style: none;
-}
-
-.breadcrumb li {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-10);
-}
-
-.breadcrumb li + li::before {
-  content: "/";
-  color: var(--text-subtle);
-}
-
-.breadcrumb a {
-  color: var(--text-muted);
-  text-decoration: none;
-}
-
-.breadcrumb a:not([aria-current]):hover,
-.breadcrumb a[aria-current="false"]:hover {
-  color: var(--text);
-  text-decoration: underline;
-}
-
-.breadcrumb a:focus-visible {
-  border-radius: var(--radius-sm);
-}
-
-.breadcrumb :where(a, span):where([aria-current]:not([aria-current="false"])) {
-  color: var(--text);
-  font-weight: var(--font-weight-medium);
-}
-
-/*
- * Pagination — page navigation for paginated lists.
- *
- * Render .btn elements inside a .pagination list. The active page is marked
- * with aria-current="page"; .btn owns the active state styling.
- *
- * Truncated ranges are plain text (`.muted`, `aria-hidden="true"`), not .btn
- * — they are decorative, not actionable. They still get the same box sizing
- * as .btn below so the row stays visually aligned.
- */
-.pagination {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.pagination .btn {
-  min-inline-size: var(--control-size);
-}
-
-.pagination > li > [aria-hidden="true"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: var(--control-size);
-}
-
-/*
- * Tabs — in-place panel switcher with real tab semantics.
- *
- * JavaScript owns roving tabindex, aria-selected, panel visibility,
- * and arrow-key navigation. CSS owns the tab strip appearance and
- * active indicator.
- *
- * Public hooks:
- * --tab-gap
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.tab) {
-  --intent: initial;
-}
-
-.tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  border-block-end: var(--border-width) solid var(--border);
-  list-style: none;
-}
-
-.tabs[aria-orientation="vertical"] {
-  display: grid;
-  align-content: start;
-  justify-items: stretch;
-  border-block-end: 0;
-  border-inline-end: var(--border-width) solid var(--border);
-}
-
-.tab {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--tab-gap, 0.375em);
-  min-block-size: var(--control-size);
-  padding-inline: var(--space-30);
-  border: 0;
-  border-block-end: 2px solid transparent;
-  border-radius: 0;
-  background: transparent;
-  color: var(--text-muted);
-  font: inherit;
-  font-weight: var(--font-weight-strong);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.tabs[aria-orientation="vertical"] .tab {
-  justify-content: flex-start;
-  border-block-end: 0;
-  border-inline-end: 2px solid transparent;
-  padding-inline-end: var(--space-40);
-}
-
-.tab:is(:disabled, [aria-disabled="true"]) {
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-}
-
-.tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
-  color: var(--text);
-}
-
-.tab:focus-visible {
-  outline: var(--focus-outline);
-  outline-color: var(--focus);
-  outline-offset: -2px;
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-}
-
-.tab[aria-selected="true"] {
-  border-block-end-color: var(--intent, var(--state-selected));
-  color: var(--intent, var(--state-selected));
-}
-
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-  border-block-end-color: transparent;
-  border-inline-end-color: var(--intent, var(--state-selected));
-}
-
-@media (forced-colors: active) {
-  .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
-    text-decoration: underline;
-    text-underline-offset: 0.18em;
-  }
-
-  .tab[aria-selected="true"] {
-    border-block-end-color: Highlight;
-    color: Highlight;
-  }
-
-  .tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-    border-block-end-color: transparent;
-    border-inline-end-color: Highlight;
-  }
-}
-
-/*
- * Scrollspy — behavior hook for navigation that marks the active section
- * while the page scrolls.
- *
- * Does not add visual styles by itself. scrollspy.js watches
- * <nav class="scrollspy">
- * containing <a href="#section"> links and toggles aria-current="location" on
- * the link whose target is in view. Pair with .nav-list and .nav-link, or style
- * [aria-current] yourself.
- *
- * Progressive enhancement: on browsers that support :target-current,
- * this file enables the native target group and marks the active link.
- *
- * Falls back gracefully: links still work when :target-current is unavailable
- * and when the JavaScript enhancer is not loaded at all.
- */
-
-@supports selector(.scrollspy a:target-current) {
-  .scrollspy {
-    scroll-target-group: auto;
-  }
-
-  .scrollspy a:target-current {
-    color: var(--text);
-    font-weight: var(--font-weight-medium);
-  }
-}
-
-
-/* Data */
-/*
- * Table — structured tabular data.
- *
- * .table-wrap provides the scroll container and outer chrome; .table owns row
- * and cell rules. Tokens are sourced from the shared scale.
- *
- * Public hooks:
- * --table-min
- * --table-cell-pad
- */
-.table-wrap {
-  inline-size: 100%;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  overflow-x: auto;
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--surface-raised);
-}
-
-.table {
-  --table-min: 100%;
-  --table-cell-pad: var(--space-30);
-
-  inline-size: max(var(--table-min), 100%);
-  border-collapse: collapse;
-  background: transparent;
-  color: var(--text);
-  font-size: var(--font-size-md);
-}
-
-.table caption {
-  padding: var(--table-cell-pad);
-  color: var(--text-muted);
-  text-align: var(--text-align, start);
-}
-
-.table th,
-.table td {
-  padding: var(--table-cell-pad);
-  border-block-end: var(--border-width) solid var(--border);
-  text-align: var(--text-align, start);
-  vertical-align: baseline;
-}
-
-.table thead th {
-  vertical-align: bottom;
-}
-
-.table th {
-  color: var(--text-muted);
-  font-weight: var(--font-weight-strong);
-}
-
-.table thead {
-  background: var(--surface-subtle);
-}
-
-.table tbody tr:hover {
-  background-color: var(--hover-overlay);
-}
-
-.table > tr:last-child > *,
-.table > :last-child > tr:last-child > * {
-  border-block-end: 0;
-}
-
-/*
- * Meter — native gauge for known-range values.
- *
- * Maps the three standard meter zones (optimum / suboptimum / even-less-good)
- * to the shared success / warning / danger intent colors.
- */
-
-.meter {
-  appearance: none;
-  -webkit-appearance: none;
-  display: block;
-  inline-size: 100%;
-  block-size: var(--bar-height);
-  overflow: hidden;
-  border: 0;
-  border-radius: var(--radius-full);
-  background: var(--surface-subtle);
-}
-
-.meter::-webkit-meter-bar {
-  -webkit-appearance: none;
-  block-size: var(--bar-height);
-  border: 0;
-  border-radius: var(--radius-full);
-  background: var(--surface-subtle);
-}
-
-.meter::-webkit-meter-optimum-value {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-  background: var(--success);
-}
-
-.meter::-webkit-meter-suboptimum-value {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-  background: var(--warning);
-}
-
-.meter::-webkit-meter-even-less-good-value {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-  background: var(--danger);
-}
-
-.meter::-moz-meter-bar {
-  block-size: var(--bar-height);
-  border-radius: var(--radius-full);
-}
-
-@media (forced-colors: active) {
-  .meter::-webkit-meter-optimum-value,
-  .meter::-webkit-meter-suboptimum-value,
-  .meter::-webkit-meter-even-less-good-value,
-  .meter::-moz-meter-bar {
-    background: Highlight;
-  }
-}
-
-/* Forms — import order matters: switch.css follows choice.css so its rules
-   land after the shared choice recipe. validation.css is part of the default
-   forms bundle, but custom builds may omit it when validation styling is
-   app-owned. */
-/*
- * Form layout and supporting text.
- *
- * Individual controls keep their own files; .choice label layout lives in
- * choice.css; .form-actions lives in form-actions.css.
- *
- * Public API: .field, .field-label, .field-help, .field-error, .field-group,
- * .required-mark.
- *
- * Public hooks:
- * --fieldset-legend-padding-inline
- */
-.field {
-  display: grid;
-  gap: var(--space-10);
-  color: var(--text);
-}
-
-.field-group {
-  min-inline-size: 0;
-  margin: 0;
-  padding: var(--space-30);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius);
-}
-
-.field-group + .field-group {
-  margin-block-start: var(--space-40);
-}
-
-.field-label,
-.field-group > legend {
-  color: var(--text);
-  font-weight: var(--font-weight-strong);
-}
-
-.field-group > legend {
-  padding-block: 0;
-  padding-inline: var(--fieldset-legend-padding-inline, var(--space-10));
-  font-size: var(--font-size-xs);
-}
-
-.field-help {
-  color: var(--text-muted);
-  font-size: var(--font-size-sm);
-}
-
-.field-error {
-  display: none;
-  color: var(--danger);
-  font-size: var(--font-size-sm);
-}
-
-.required-mark {
-  color: var(--danger);
-}
-
-.field.danger .field-help {
-  color: var(--danger);
-}
-
-/*
- * Text controls — input, textarea, select.
- *
- * Neutral geometry and interaction states shared across all text-like
- * controls. select shares this base recipe; its chevron/appearance layer
- * lives in select.css. checkbox, radio, range, switch, and file have their
- * own files.
- *
- * --control-* are the per-state control tokens, reserved for control geometry.
- * State selectors only flip tokens; non-text controls do not consume them, so
- * matching those selectors is a no-op. The .field wrapper uses --field-*
- * (form.css).
- *
- * --control-border-block-end-color/-width are unset extension points, mirroring
- * --btn-border-block-end-* (button.css), for themes that give text controls an
- * underline-style lower edge instead of a uniform border.
- *
- * Public hooks:
- * --control-border
- * --control-bg
- * --control-fg
- * --control-cursor
- */
-.input,
-.textarea,
-.select {
-  --control-border: var(--border);
-  --control-bg: var(--surface);
-  --control-fg: var(--text);
-  --control-cursor: auto;
-
-  appearance: none;
-  inline-size: 100%;
-  min-block-size: var(--control-size);
-  padding-inline: var(--space-30);
-  border: var(--border-width) solid var(--form-invalid-border, var(--control-border));
-  border-block-end-color: var(
-    --form-invalid-border,
-    var(--control-border-block-end-color, var(--control-border))
-  );
-  border-block-end-width: var(--control-border-block-end-width, var(--border-width));
-  border-radius: var(--radius);
-  background: var(--control-bg);
-  color: var(--control-fg);
-  font-size: var(--control-font-size);
-  cursor: var(--control-cursor);
-  outline: none;
-  transition:
-    border-color var(--duration),
-    box-shadow var(--duration),
-    background-color var(--duration),
-    color var(--duration);
-}
-
-.textarea {
-  min-block-size: 6rem;
-  padding-block: var(--space-20);
-  resize: vertical;
-}
-
-.input:hover:not(:disabled),
-.textarea:hover:not(:disabled) {
-  --control-border: var(--text-subtle);
-}
-
-.select:hover:not(:disabled) {
-  --control-bg: var(--surface-subtle);
-}
-
-.input:focus-visible,
-.textarea:focus-visible,
-.select:focus-visible {
-  --control-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-.input[readonly],
-.textarea[readonly] {
-  --control-bg: var(--surface-subtle);
-  --control-border: var(--border);
-}
-
-.input:disabled,
-.textarea:disabled,
-.select:disabled {
-  --control-bg: var(--surface-subtle);
-  --control-fg: var(--state-disabled);
-  --control-border: var(--border);
-  --control-cursor: not-allowed;
-}
-
-.input::placeholder,
-.textarea::placeholder {
-  color: var(--text-muted);
-}
-
-/*
- * 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.
- *
- * Public hooks:
- * --input-icon-size
- */
-.input-icon {
-  --input-icon-size: 1.25rem;
-
-  display: block;
-  position: relative;
-}
-
-/* Icon — shared by leading and trailing */
-.input-icon > :where(:not(.input)) {
-  position: absolute;
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  font-size: var(--input-icon-size);
-  color: var(--text-muted);
-  pointer-events: none;
-}
-
-/* Leading: icon is the first child */
-.input-icon > :first-child:where(:not(.input)) {
-  inset-inline-start: var(--space-30);
-}
-
-/* Trailing: input is the first child, icon follows */
-.input-icon > .input:first-child ~ :where(:not(.input)) {
-  inset-inline-end: var(--space-30);
-}
-
-/* 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);
-}
-
-/* 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));
-}
-
-/* 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));
-}
-
-/*
- * Checkbox and radio controls.
- *
- * Native inputs keep their behavior while sharing custom geometry, checked,
- * focus, and disabled states across semantic forms and classed aliases. This
- * file also owns the .choice label layout (input + label text) so the whole
- * concept lives in one file.
- *
- * Switches (input[role="switch"]) are excluded so switch.css owns their
- * geometry and states. switch.css is imported after this file.
- *
- * Public hooks:
- * --choice-control-offset
- * --choice-border
- * --choice-bg
- * --choice-mark
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.choice, .check, .radio) {
-  --intent: initial;
-  --intent-fg: initial;
-}
-
-/* A classed .choice is the component surface. Let its direct input consume a
-   local intent without reopening inherited page-level intents. */
-:where(.choice) > :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
-  --intent: inherit;
-  --intent-fg: inherit;
-}
-
-.choice {
-  --choice-control-offset: 0.25em;
-
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--space-20);
-  color: var(--text);
-  font-size: var(--control-font-size);
-  cursor: pointer;
-}
-
-/* Optical alignment: nudge the control down so the checkbox/radio sits
-   visually centered with the first line of label text, not flush with the
-   top of the line-box. Default 0.25em (~4px at 16px) places the control just
-   below the cap-height, matching what Bootstrap, Material, and most polished
-   form libraries ship. Multi-line labels still keep the control at the top
-   thanks to align-items: flex-start. Override per-instance via
-   --choice-control-offset for themes with a different line-height or control
-   size. */
-.choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
-  flex: 0 0 auto;
-  margin-block-start: var(--choice-control-offset);
-}
-
-.choice > span > .field-help {
-  display: block;
-}
-
-/* Progressive enhancement: dim the whole row when one of its controls is
-   disabled. Without :has() the native disabled control keeps its own state
-   styling — the row-level dim is lost but the field stays clearly disabled. */
-.choice:has(> :disabled) {
-  color: var(--state-disabled);
-  cursor: not-allowed;
-}
-
-/* Control geometry. --choice-* are the per-state tokens. */
-.check,
-.radio {
-  --choice-border: var(--border);
-  --choice-bg: var(--surface);
-  --choice-mark: var(--primary-fg);
-
-  position: relative;
-  vertical-align: middle;
-  display: inline-grid;
-  place-content: center;
-  inline-size: 1.125em;
-  block-size: 1.125em;
-  margin: 0;
-  border: var(--border-width) solid var(--form-invalid-border, var(--choice-border));
-  background: var(--choice-bg);
-  color: var(--choice-mark);
-  appearance: none;
-  cursor: pointer;
-}
-
-.check {
-  border-radius: var(--radius-sm);
-}
-
-.radio {
-  border-radius: var(--radius-full);
-}
-
-.check::before,
-.radio::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  transform: scale(0);
-  transition: transform var(--duration);
-}
-
-.check::before {
-  inline-size: 0.58em;
-  block-size: 0.34em;
-  border-inline-start: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
-  transform: translateY(-0.06em) rotate(-45deg) scale(0);
-}
-
-.radio::before {
-  inline-size: 0.5em;
-  block-size: 0.5em;
-  border-radius: var(--radius-full);
-  background: currentColor;
-}
-
-.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));
-}
-
-.check:checked::before {
-  transform: translateY(-0.06em) rotate(-45deg) scale(1);
-}
-
-.check:indeterminate::before {
-  border-inline-start: 0;
-  inline-size: 0.6em;
-  block-size: 0;
-  border-block-end: 2px solid currentColor;
-  transform: scale(1);
-}
-
-.radio:checked::before {
-  transform: scale(1);
-}
-
-.check:hover:not(:checked, :indeterminate, :disabled),
-.radio:hover:not(:checked, :indeterminate, :disabled) {
-  --choice-border: var(--text-subtle);
-}
-
-.check:focus-visible,
-.radio:focus-visible {
-  --choice-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-.check:disabled,
-.radio:disabled {
-  --choice-bg: var(--surface-subtle);
-  --choice-border: var(--border);
-  --choice-mark: var(--state-disabled);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-@media (forced-colors: active) {
-  .check,
-  .radio {
-    --choice-border: ButtonText;
-    --choice-bg: Canvas;
-    --choice-mark: ButtonText;
-  }
-
-  .check:checked,
-  .radio:checked,
-  .check:indeterminate {
-    --choice-border: Highlight;
-    --choice-bg: Highlight;
-    --choice-mark: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .check:disabled,
-  .radio:disabled {
-    --choice-border: GrayText;
-    --choice-bg: Canvas;
-    --choice-mark: GrayText;
-  }
-}
-
-/*
- * Choice cards — card-style radio and checkbox labels.
- *
- * Each .choice-card is a <label> wrapping a native radio or checkbox. When
- * :has() is supported the input is visually hidden and the card mirrors its
- * state: checked border and tint, checkmark badge (round for radio, rounded
- * square for checkbox), focus ring, disabled dimming. Without :has() the
- * native input stays visible so selection state never disappears.
- *
- * The badge overhangs the top-right corner by 0.375em; ancestors with
- * overflow: hidden will clip it. Pair with grid or flex utilities for group
- * layout.
- *
- * Public hooks:
- * --choice-card-pad
- * --choice-card-radius
- * --choice-card-border
- * --choice-card-bg
- * --choice-card-check-size
- */
-:where(.choice-card) {
-  --intent: initial;
-  --intent-fg: initial;
-}
-
-.choice-card {
-  --choice-card-pad: var(--density-space, var(--space-40));
-  --choice-card-radius: var(--radius);
-  --choice-card-border: var(--border);
-  --choice-card-bg: var(--surface);
-  --choice-card-check-size: 1.5em;
-
-  position: relative;
-  display: block;
-  padding: var(--choice-card-pad);
-  border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border));
-  border-radius: var(--choice-card-radius);
-  background: var(--choice-card-bg);
-  color: var(--text);
-  cursor: pointer;
-  transition:
-    border-color var(--duration),
-    background-color var(--duration),
-    box-shadow var(--duration);
-}
-
-/* The native input is visually hidden but stays focusable and participates in
-   form submission and keyboard navigation (sr-only pattern). Guarded: without
-   :has() the card cannot mirror the input's state, so the visible native
-   control is the fallback affordance. */
-@supports selector(:has(*)) {
-  .choice-card > :is(input[type="radio"], input[type="checkbox"]) {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-}
-
-/* Focus ring on the label follows the hidden input's focus. */
-.choice-card:has(:focus-visible) {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-.choice-card:has(:disabled) {
-  opacity: var(--disabled-opacity);
-  cursor: not-allowed;
-}
-
-.choice-card:hover:not(:has(:disabled)) {
-  --choice-card-border: var(--text-subtle);
-}
-
-/* Checked border — shared by radio and checkbox */
-.choice-card:has(:checked) {
-  --choice-card-border: var(--intent, var(--primary));
-}
-
-/* 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 oklch, var(--surface) 96%, var(--intent, var(--primary)));
-  }
-}
-
-/* Checkmark badge — always rendered at scale(0) and scaled in on check, so
-   the entrance can transition (a pseudo created on :checked could not). */
-.choice-card::before,
-.choice-card::after {
-  content: "";
-  position: absolute;
-  inset-inline-end: -0.375em;
-  inset-block-start: -0.375em;
-  inline-size: var(--choice-card-check-size);
-  block-size: var(--choice-card-check-size);
-  transform: scale(0);
-  transition: transform var(--duration);
-}
-
-/* Badge disc — circle for radio, rounded square for checkbox */
-.choice-card::before {
-  background: var(--intent, var(--primary));
-  box-shadow: 0 0 0 2px var(--surface);
-  z-index: 1;
-}
-
-.choice-card:has(input[type="radio"])::before {
-  border-radius: var(--radius-full);
-}
-
-.choice-card:has(input[type="checkbox"])::before {
-  border-radius: var(--radius-sm);
-}
-
-/* Check mark */
-.choice-card::after {
-  background: var(--intent-fg, var(--primary-fg));
-  -webkit-mask: var(--icon-check) center / 60% no-repeat;
-  mask: var(--icon-check) center / 60% no-repeat;
-  z-index: 2;
-}
-
-.choice-card:has(:checked)::before,
-.choice-card:has(:checked)::after {
-  transform: scale(1);
-}
-
-@media (forced-colors: active) {
-  .choice-card {
-    --choice-card-border: ButtonText;
-    --choice-card-bg: Canvas;
-  }
-
-  .choice-card:has(:checked) {
-    --choice-card-border: Highlight;
-    /* Pin the background: with forced-color-adjust: none the color-mix tint
-       above would actually render, uncontrolled in high-contrast themes. */
-    --choice-card-bg: Canvas;
-    forced-color-adjust: none;
-  }
-
-  .choice-card:has(:checked)::before {
-    background: Highlight;
-    box-shadow: 0 0 0 2px Canvas;
-  }
-
-  .choice-card:has(:checked)::after {
-    background: HighlightText;
-  }
-}
-
-/*
- * Select — chevron and appearance layer on top of the shared text-control
- * recipe.
- *
- * Base geometry and interaction states come from control.css (select shares
- * the --control-* tokens). This file only removes the native arrow and draws
- * 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.
- */
-.select:not([multiple], [size]:not([size="1"])) {
-  appearance: none;
-  padding-inline-end: calc(var(--space-30) + var(--space-60));
-  background-image: var(--icon-chevron);
-  background-position: center right var(--space-30);
-  background-size: 1rem 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);
-}
-
-/* Both forced-colors and prefers-contrast hand the arrow back to the
-   browser instead of guessing a higher-contrast recolor of our own icon —
-   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"])) {
-    appearance: auto;
-    background-image: none;
-    padding-inline-end: var(--space-30);
-  }
-}
-
-/*
- * Customizable select — appearance: base-select picker enhancement.
- *
- * Progressive enhancement on top of the native .select baseline in select.css.
- * Wrapped in @supports and gated on fine pointer devices so it never blocks a
- * layout. Add .native to a specific select to opt out.
- *
- * No layout or interaction contract may depend on appearance: base-select.
- * Arbitrary menu and popover behavior belongs elsewhere.
- *
- * Internal:
- * --control-border
- * --control-bg
- */
-@media (forced-colors: none) and (prefers-contrast: no-preference) and (hover: hover) and (
-    pointer: fine
-  ) {
-  @supports (appearance: base-select) {
-    .select:not([multiple], .native, [size]:not([size="1"])) {
-      appearance: base-select;
-      align-items: center;
-
-      &::picker(select) {
-        appearance: base-select;
-        max-height: min(24rem, calc(var(--viewport-block) * 0.7));
-        margin-block: var(--space-20);
-        padding: 0;
-        border: var(--border-width) solid var(--border);
-        border-radius: var(--radius);
-        background-color: var(--surface-raised);
-        color: inherit;
-        box-shadow: var(--shadow-popout);
-      }
-
-      &:open {
-        --control-border: var(--border);
-        --control-bg: var(--surface-raised);
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-      }
-
-      &::picker-icon {
-        display: none;
-      }
-
-      & option {
-        position: relative;
-        padding-block: var(--space-20);
-        padding-inline: var(--space-30);
-        white-space: normal;
-        transition-property: color, background-color;
-        transition-duration: var(--duration);
-
-        &:not(:disabled):hover {
-          background-color: var(--surface-subtle);
-          color: var(--text);
-          cursor: pointer;
-        }
-
-        &:not(:disabled):focus-visible {
-          background-color: var(--primary);
-          color: var(--primary-fg);
-          outline: none;
-        }
-
-        &:active {
-          background-color: var(--surface-subtle);
-          color: var(--text);
-        }
-
-        &::checkmark {
-          content: "";
-          display: block;
-          inline-size: 1rem;
-          block-size: 1rem;
-          background-color: currentColor;
-          -webkit-mask: var(--icon-check) center / contain no-repeat;
-          mask: var(--icon-check) center / contain no-repeat;
-        }
-      }
-
-      & optgroup {
-        padding-block-start: 0.5em;
-
-        & option:first-child {
-          margin-block-start: 0.5em;
-        }
-      }
-    }
-  }
-}
-
-/*
- * Native-only control polish: the file input and color picker mostly defeat
- * custom styling, so the framework stays out of the way and just keeps them
- * readable and theme-aware.
- *
- * Range has its own custom-styled file (range.css) so the focus ring can
- * target the thumb pseudo-element rather than the rectangular CSS box.
- */
-.file {
-  color: var(--text-muted);
-}
-
-.file::file-selector-button {
-  margin-inline-end: var(--space-30);
-  padding-block: var(--space-10);
-  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-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition:
-    background-color var(--duration),
-    border-color var(--duration),
-    color var(--duration);
-}
-
-.file:disabled::file-selector-button {
-  cursor: not-allowed;
-}
-
-.file:not(:disabled)::file-selector-button:hover {
-  background: var(--border);
-}
-
-.file:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-/* Native color picker — keep the browser's dialog and selected-color UI. */
-.color {
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-  padding: var(--space-10);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-  cursor: pointer;
-}
-
-.color::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-.color::-webkit-color-swatch {
-  border: 0;
-}
-
-.color::-moz-color-swatch {
-  border: 0;
-}
-
-.color:disabled {
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-}
-
-.color:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-@media (forced-colors: active) {
-  .color {
-    border-color: ButtonText;
-    background: ButtonFace;
-    forced-color-adjust: none;
-  }
-}
-
-/*
- * Range slider — custom-styled so the focus ring always targets the
- * user-manipulated surface (the thumb) rather than the CSS box.
- *
- * appearance: none gives us full control over track and thumb; without it,
- * pseudo-element rules for ::-webkit-slider-thumb and ::-moz-range-thumb
- * are not reliably applied across browsers.
- *
- * Public hooks:
- * --range-thumb-size
- * --range-track-height
- * --range-thumb-bg
- * --range-track-bg
- */
-
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.range) {
-  --intent: initial;
-}
-
-.range {
-  --range-thumb-size: 1.25rem;
-  --range-track-height: 0.25rem;
-  --range-thumb-bg: var(--intent, var(--primary));
-  --range-track-bg: var(--border);
-
-  appearance: none;
-  inline-size: 100%;
-  block-size: var(--range-thumb-size);
-  background: transparent;
-  cursor: pointer;
-}
-
-.range::-webkit-slider-runnable-track {
-  block-size: var(--range-track-height);
-  border-radius: var(--radius-full);
-  background: var(--range-track-bg);
-}
-
-.range::-moz-range-track {
-  block-size: var(--range-track-height);
-  border-radius: var(--radius-full);
-  background: var(--range-track-bg);
-}
-
-.range::-webkit-slider-thumb {
-  appearance: none;
-  inline-size: var(--range-thumb-size);
-  block-size: var(--range-thumb-size);
-  border-radius: var(--radius-full);
-  border: 0;
-  background: var(--range-thumb-bg);
-  margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
-  cursor: inherit;
-  transition: box-shadow var(--duration);
-}
-
-.range::-moz-range-thumb {
-  inline-size: var(--range-thumb-size);
-  block-size: var(--range-thumb-size);
-  border-radius: var(--radius-full);
-  border: 0;
-  background: var(--range-thumb-bg);
-  cursor: inherit;
-  transition: box-shadow var(--duration);
-}
-
-.range:focus-visible {
-  outline: 2px solid transparent;
-}
-
-/*
- * The 1px surface-coloured separator keeps the ring visually distinct from
- * the small, coloured thumb — unlike a full-size input where the same gap
- * would read as an unwanted void.
- */
-.range:focus-visible::-webkit-slider-thumb {
-  box-shadow:
-    0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
-}
-
-.range:focus-visible::-moz-range-thumb {
-  box-shadow:
-    0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
-}
-
-.range:disabled {
-  --range-thumb-bg: var(--state-disabled);
-  cursor: not-allowed;
-  opacity: var(--disabled-opacity);
-}
-
-/* Forced colors: map the custom thumb/track to system colors. The focus
-   indicator stays visible through the transparent outline on :focus-visible. */
-@media (forced-colors: active) {
-  .range {
-    --range-thumb-bg: ButtonText;
-    --range-track-bg: Canvas;
-  }
-}
-
-/*
- * Switch controls for checkbox inputs with switch semantics.
- *
- * The switch remains an input control, not a decorative toggle. Checked, hover,
- * focus-visible, and disabled states stay clear.
- *
- * Public hooks:
- * --switch-bg
- * --switch-border
- * --switch-knob
- * --switch-width
- * --switch-block-size
- * --switch-knob-margin
- * --switch-knob-size
- * --switch-travel
- */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.switch) {
-  --intent: initial;
-  --intent-fg: initial;
-}
-
-.switch {
-  --switch-bg: var(--border);
-  --switch-border: var(--border);
-  --switch-knob: var(--surface-raised);
-  --switch-width: calc(var(--control-size) * 1.16);
-  --switch-block-size: calc(var(--control-size) * 0.63);
-  --switch-knob-margin: calc(var(--switch-block-size) * 0.12);
-  --switch-knob-size: calc(var(--switch-block-size) - 2 * var(--switch-knob-margin));
-  --switch-travel: calc(
-    var(--switch-width) -
-    var(--switch-knob-size) -
-    2 *
-    var(--border-width) -
-    2 *
-    var(--switch-knob-margin)
-  );
-
-  position: relative;
-  display: inline-grid;
-  align-items: center;
-  justify-content: start;
-  inline-size: var(--switch-width);
-  block-size: var(--switch-block-size);
-  margin: 0;
-  border: var(--border-width) solid var(--form-invalid-border, var(--switch-border));
-  border-radius: var(--radius-full);
-  background: var(--switch-bg);
-  appearance: none;
-  cursor: pointer;
-}
-
-.switch::before {
-  content: "";
-  inline-size: var(--switch-knob-size);
-  block-size: var(--switch-knob-size);
-  margin-inline: var(--switch-knob-margin);
-  border-radius: var(--radius-full);
-  background: var(--switch-knob);
-  box-shadow: var(--shadow);
-  transition:
-    transform var(--duration),
-    background-color var(--duration),
-    box-shadow var(--duration);
-}
-
-.switch: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:checked::before {
-  transform: translateX(var(--switch-travel));
-}
-
-/* The knob travels toward inline-end; in RTL that is leftward, so the
-    translateX sign flips. translateX is physical, not logical. */
-.switch:checked:dir(rtl)::before {
-  transform: translateX(calc(var(--switch-travel) * -1));
-}
-
-.switch:focus-visible {
-  --switch-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-.switch:disabled {
-  --switch-bg: var(--surface-subtle);
-  --switch-border: var(--border);
-  --switch-knob: var(--state-disabled);
-  opacity: 1;
-  cursor: not-allowed;
-}
-
-@media (forced-colors: active) {
-  /* --switch-knob must be set on the element, not on ::before: a custom
-     property declared on the pseudo would shadow the :checked override. */
-  .switch {
-    --switch-border: ButtonText;
-    --switch-knob: ButtonText;
-  }
-
-  .switch::before {
-    box-shadow: none;
-  }
-
-  .switch:checked {
-    --switch-bg: Highlight;
-    --switch-border: Highlight;
-    --switch-knob: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .switch:disabled {
-    --switch-bg: Canvas;
-    --switch-border: GrayText;
-    --switch-knob: GrayText;
-    forced-color-adjust: auto;
-  }
-}
-
-/*
- * Form validation states.
- *
- * Imported by default through forms/index.css. Custom builds may omit this
- * file when an app wants to own validation styling completely.
- *
- * State coverage (which states each component ships) is audited in
- * tests/validation.test.js and summarized in docs/pages/forms/validation.md —
- * not kept as a source comment that can drift from the implementation.
- *
- * Public hooks:
- * --form-invalid-border
- *
- * Internal:
- * --choice-bg
- * --switch-bg
- */
-
-.field.danger {
-  --form-invalid-border: var(--danger);
-}
-
-.field.danger > .field-error {
-  display: block;
-}
-
-@supports selector(:has(*)) {
-  .field:has([aria-invalid="true"]) > .field-error,
-  .needs-validation.was-validated .field:has(:invalid) > .field-error {
-    display: block;
-  }
-}
-
-:where(.input, .textarea, .select, .check, .radio, .switch)[aria-invalid="true"],
-.needs-validation.was-validated :is(.input, .textarea, .select, .check, .radio, .switch):invalid {
-  --form-invalid-border: var(--danger);
-}
-
-/* Override checked/indeterminate fill so both border and fill signal danger
-   instead of a red border around a primary-colored control. All three
-   invalid routes must converge: aria-invalid, was-validated :invalid, and
-   :user-invalid. */
-.check:is(:checked, :indeterminate)[aria-invalid="true"],
-.needs-validation.was-validated .check:is(:checked, :indeterminate):invalid,
-.radio:checked[aria-invalid="true"],
-.needs-validation.was-validated .radio:checked:invalid {
-  --choice-bg: var(--danger);
-}
-
-.switch:checked[aria-invalid="true"],
-.needs-validation.was-validated .switch:checked:invalid {
-  --switch-bg: var(--danger);
-}
-
-@supports selector(:user-invalid) {
-  .needs-validation .check:is(:checked, :indeterminate):user-invalid,
-  .needs-validation .radio:checked:user-invalid {
-    --choice-bg: var(--danger);
-  }
-
-  .needs-validation .switch:checked:user-invalid {
-    --switch-bg: var(--danger);
-  }
-}
-
-/* Choice cards hide their native input, so invalid state must surface on the
-   card itself. Sets the same --form-invalid-border hook the card's border
-   consumes. */
-@supports selector(:has(*)) {
-  .choice-card:has([aria-invalid="true"]),
-  .needs-validation.was-validated .choice-card:has(:invalid) {
-    --form-invalid-border: var(--danger);
-  }
-}
-
-@supports selector(:user-invalid) {
-  .needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
-    --form-invalid-border: var(--danger);
-  }
-}
-
-@supports selector(:has(:user-invalid)) {
-  .needs-validation .field:has(:user-invalid) > .field-error {
-    display: block;
-  }
-
-  .needs-validation .choice-card:has(:user-invalid) {
-    --form-invalid-border: var(--danger);
-  }
-}
-
-/*
- * Form actions — bottom form bar with sticky variant.
- *
- * A flex cluster of buttons/actions that closes a form. The sticky variant
- * docks to the viewport bottom with a translucent blur where supported; at
- * rest it stays visually neutral so it does not double as a separator.
- *
- * Public hooks:
- * --form-actions-align
- * --form-actions-justify
- * --form-actions-margin-block-start
- *
- * Internal:
- * --form-actions-sticky-block-offset (owned by .form-actions.sticky)
- * --form-actions-sticky-inline-offset (owned by .form-actions.sticky)
- * --form-actions-sticky-padding (owned by .form-actions.sticky)
- */
-.form-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  align-items: var(--form-actions-align, center);
-  justify-content: var(--form-actions-justify, flex-start);
-  margin-block-start: var(--form-actions-margin-block-start, var(--space-50));
-}
-
-/* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent
-   surface and backdrop-blur are visually neutral. Content scrolling behind
-   the bar reveals the blur as a natural separator instead of relying on a
-   shadow. */
-.form-actions.sticky {
-  position: sticky;
-  inset-block-end: var(--form-actions-sticky-block-offset, 0px);
-  z-index: var(--z-sticky);
-  isolation: isolate;
-
-  margin-inline: calc(var(--form-actions-sticky-inline-offset, 0px) * -1);
-  padding: var(--form-actions-sticky-padding, var(--space-30));
-
-  border-block-start: var(--border-width) solid var(--border);
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(1rem);
-  backdrop-filter: blur(1rem);
-}
-
-/* The translucent surface needs @supports, not a double declaration: the
-   value contains var(), so a browser without color-mix() cannot reject it at
-   parse time — it wins the cascade, then fails at computed-value time and
-   the background disappears instead of falling back to the opaque line. */
-@supports (background: color-mix(in oklch, red 50%, transparent)) {
-  .form-actions.sticky {
-    background: color-mix(in oklch, var(--surface) 88%, transparent);
-  }
-}
-
-/*
- * Small, single-purpose utilities for common escape hatches.
- *
- * These support components and layout primitives without becoming a
- * utility-first API.
- */
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.fit {
-  inline-size: fit-content;
-  max-inline-size: 100%;
-}
-
-.grow {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-}
-
-.text-nowrap {
-  white-space: nowrap;
-}
-
-.truncate {
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.items-start {
-  --items-align: start;
-  align-items: start;
-}
-
-.items-center {
-  --items-align: center;
-  align-items: center;
-}
-
-.items-end {
-  --items-align: end;
-  align-items: end;
-}
-
-.muted {
-  color: var(--text-muted);
-}
-
-/* Circle: forces a fully round shape without mutating global radius tokens.
-   Works on any component because utilities load after components. .join is
-   the one exception: it writes corner longhands on its children, so
-   .join.circle keeps its own --join-radius hook (join.css). */
-.circle {
-  border-radius: var(--radius-full);
-}
-
-/* Text alignment — uses logical properties so it follows writing direction. */
-.text-start {
-  --text-align: start;
-  text-align: start;
-}
-
-.text-center {
-  --text-align: center;
-  text-align: center;
-}
-
-.text-end {
-  --text-align: end;
-  text-align: end;
-}
-
-/* Text wrapping utilities. Unsupported values are ignored by the browser. */
-.text-balance {
-  text-wrap: balance;
-}
-
-.text-pretty {
-  text-wrap: pretty;
-}
-
-/* Generic list chrome reset. Use for any list (tags, footer columns, related
-   items). For navigation lists, prefer .nav-list for semantic intent.
-   components/{actions,navbar}.css apply their own resets where needed. */
-.list-reset {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-/* Separator dot for inline metadata rows (byline, timestamp, read time,
-   breadcrumb-like facts). Pair with a flex/cluster container; flex: none
-   keeps a flex parent from shrinking it to nothing. */
-.dot {
-  flex: none;
-  inline-size: 0.25rem;
-  block-size: 0.25rem;
-  border-radius: var(--radius-full);
-  background: var(--text-subtle);
-}
-
-/* Link variants for chrome that should not look like prose links. Use in
-   navigation, tags, footer, tables of contents, and similar surfaces. */
-.link-plain {
-  color: inherit;
-  text-decoration: none;
-}
-
-.link-muted {
-  color: var(--text-muted);
-  text-decoration: none;
-}
-
-.link-muted:hover {
-  color: var(--text);
-}
-
-/* Spacing step helpers — semantic scale (sm / default / lg).
-   Names map to logical properties for writing-direction safety. The default
-   step uses --space-40, which matches the framework's built-in padding on
-   cards, dialogs, and form-actions. */
-
-/* Gap */
-.gap-none {
-  gap: 0;
-}
-
-/* Padding — block (vertical) */
-.py {
-  padding-block: var(--density-space);
-}
-
-/* Padding — inline (horizontal) */
-.px {
-  padding-inline: var(--density-space);
-}
-
-/* Margin — block-start */
-.mbs {
-  margin-block-start: var(--density-space);
-}
-
-/* Margin — block-end */
-.mbe {
-  margin-block-end: var(--density-space);
-}
-
-/* Joined controls are a component, but must load after the controls it groups. */
-/*
- * Join — visually groups adjacent controls into a single unit.
- *
- * This is a cross-cutting control primitive, not a forms-only component:
- * it applies equally to inputs, selects, buttons, and button-like links.
- *
- * Cascade note: .join writes border-radius longhands on its direct children.
- * Keep this file loaded after control/component styles so those corners win at
- * equal specificity.
- *
- * Public hooks:
- * --join-radius
- *
- * Internal:
- * --join-ss
- * --join-se
- * --join-es
- * --join-ee
- * --control-border
- * --control-bg
- * --control-fg
- */
-.join {
-  --join-radius: var(--radius);
-  --join-ss: 0;
-  --join-se: 0;
-  --join-es: 0;
-  --join-ee: 0;
-
-  align-items: stretch;
-  display: inline-flex;
-}
-
-/* The .circle utility cannot round a join: corners are written as longhands
-   on the children below, so the group radius must flow through the token. */
-.join.circle {
-  --join-radius: var(--radius-full);
-}
-
-.join-addon {
-  --control-border: var(--border);
-  --control-bg: var(--surface-subtle);
-  --control-fg: var(--text-muted);
-
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  min-block-size: var(--control-size);
-  padding-inline: var(--space-30);
-  border: var(--border-width) solid var(--control-border);
-  border-radius: var(--radius);
-  background: var(--control-bg);
-  color: var(--control-fg);
-  font-size: var(--control-font-size);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.join > * {
-  border-start-start-radius: var(--join-ss);
-  border-start-end-radius: var(--join-se);
-  border-end-end-radius: var(--join-ee);
-  border-end-start-radius: var(--join-es);
-}
-
-.join > :first-child {
-  --join-ss: var(--join-radius);
-  --join-es: var(--join-radius);
-}
-
-.join > :last-child {
-  --join-se: var(--join-radius);
-  --join-ee: var(--join-radius);
-}
-
-.join > :only-child {
-  --join-ss: var(--join-radius);
-  --join-se: var(--join-radius);
-  --join-es: var(--join-radius);
-  --join-ee: var(--join-radius);
-}
-
-.join > * + * {
-  margin-inline-start: calc(var(--border-width) * -1);
-}
-
-.join > :is(:hover, :focus, :focus-within) {
-  z-index: 1;
-}
-
-/* Keep an active focus ring above an adjacent hovered control. This matters
-   on platforms where clicking a button does not move focus from the input. */
-.join > :is(:focus, :focus-within) {
-  z-index: 2;
-}
-
-/* An input's border must read as the "primary" edge against an attached
-   action (e.g. a password-reveal button) at all times, not only while
-   hovered or focused — otherwise the shared edge flips ownership as the
-   user's pointer moves, which reads as a rendering glitch. */
-.join > :is(.input, .textarea, .select) {
-  z-index: 3;
-}
-
-/* An input/select with an attached action reads as one composite field. Move
-   its outer focus treatment to the join; button-only groups keep per-button
-   focus, and unsupported :has() browsers retain the control's normal ring. */
-.join:has(> :is(.input, .textarea, .select):focus-visible) {
-  border-radius: var(--join-radius);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}
-
-.join:has(> :is(.input, .textarea, .select)) > :is(.input, .textarea, .select):focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-
-/* Focus baseline — a visible outline is the guaranteed focus affordance. The
-   :focus outline covers legacy browsers; modern browsers hide it for
-   pointer/mouse focus and interactive components layer their ring on top.
-
-   Invariant: an interactive component must never rely on box-shadow alone
-   for its keyboard focus indicator. Components that remove the native
-   outline on :focus-visible replace it with a transparent outline — invisible
-   normally, forced to the system focus color under forced-colors. */
-:focus {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
-}
-
-@supports selector(:focus-visible) {
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  /* Pointer focus must still signal in high-contrast mode, where the shared
-     box-shadow rings are disabled (--focus-ring-shadow: none). */
-  @media (forced-colors: active) {
-    :focus:not(:focus-visible) {
-      outline: var(--focus-outline);
-    }
-  }
-}
-
-@media print {
-  :root,
-  body {
-    /* Save some ink in dark mode */
-    color-scheme: light;
-    background: #fff;
-    color: #000;
-  }
-
-  .flyout,
-  .tooltip,
-  .surface-backdrop,
-  .status-bar,
-  .spinner,
-  dialog.modal[open],
-  dialog.drawer[open] {
-    display: none !important;
-  }
-
-  button.btn,
-  input[type="button"].btn,
-  input[type="submit"].btn,
-  input[type="reset"].btn {
-    display: none !important;
-  }
-
-  a.btn[href^="http"]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.875em;
-  }
-
-  .card,
-  .alert,
-  .badge {
-    border: var(--border-width) solid CanvasText;
-    break-inside: avoid;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    break-after: avoid;
-  }
-}
-
-
-/*
- * NOTE: The 'optional/' directory contains layout and utility extensions
- * (such as optional grids, split, visual effects, and extra utility classes
- * like .gap-sm, .flex-nowrap, .shadow-sm, etc.). These are intentionally not
- * bundled here. Two entry points ship them:
- *
- *   actual-css/css/optional/index   optional layer only
- *   actual-css/css/actual.full      core + optional
- *
- * Import one of these paths in your project when you need them.
- */