actual-css 0.1.0

package/dist/actual.css

@@ -0,0 +1,4929 @@
+/* Mild reset: useful defaults without classless magic. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+[hidden]:not([hidden="until-found"]) {
+  display: none !important;
+}
+
+/* Legacy dialog fallback only. Modern dialogs keep the browser's native closed
+   state so display/overlay transitions are not flattened by the reset.
+   The presentation for the dialog-fallback.js shim lives in the separate
+   dialog-fallback.css, so it can be dropped from custom bundles. */
+@supports not (selector(dialog:modal)) {
+  dialog:not([open]) {
+    display: none;
+  }
+}
+
+:where(img, svg, video) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+  }
+}
+
+/*
+ * Legacy dialog fallback — presentation for the dialog-fallback.js shim
+ * (browsers without native <dialog>: Safari <= 15.3, Firefox <= 97).
+ *
+ * Isolated in its own file so a custom bundle can opt out by dropping this
+ * import; the JS side is disabled with data-dialog-fallback="false" on the
+ * root element or on a dialog. Must load before component styles so ties
+ * such as dialog.modal's padding resolve in the component's favor.
+ *
+ * The whole file is inert on modern browsers: rules key on the
+ * .dialog-fallback marker written by the shim, so browsers that support
+ * <dialog> but not :modal are never affected either.
+ */
+@supports not (selector(dialog:modal)) {
+  /* Browsers without native <dialog> ship no UA dialog styles at all;
+     approximate them. :where() keeps specificity at dialog[open] level so
+     component styles such as dialog.modal still override the emulation. */
+  dialog[open]:where(.dialog-fallback) {
+    position: absolute;
+    inset-inline: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-inline-size: calc(100% - 2rem);
+    margin: auto;
+    padding: var(--space-4, 1em);
+    border: var(--border-width, 1px) solid var(--border, currentColor);
+    background: var(--surface-raised, #fff);
+    color: var(--text, inherit);
+  }
+
+  /* Open modally: fixed near the top (no fit-content in the block axis on
+     these browsers, so no vertical centering) and above menus, below
+     tooltips. Legacy-only layer, hence no z-index token. The spread shadow is
+     the visible backdrop: the dialog is its own stacking context, where a
+     negative z-index child paints above the element's background, so the
+     dimming cannot live on the ::before. */
+  dialog[open].is-fallback-modal {
+    position: fixed;
+    inset-block: 8vh auto;
+    max-block-size: 84vh;
+    overflow: auto;
+    z-index: 40;
+    box-shadow: 0 0 0 100vmax var(--backdrop-fill, rgb(0 0 0 / 35%));
+  }
+
+  /* Transparent stand-in for ::backdrop, hit-testing only. Clicks on it hit
+     the dialog element outside its own box, which dialog.js already treats as
+     a backdrop click, and it blocks pointer interaction with the page behind
+     the modal. */
+  dialog[open].is-fallback-modal::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+  }
+}
+
+:root {
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --line-height: 1.5;
+  --line-height-tight: 1.25;
+  --line-height-relaxed: 1.75;
+  --font-weight: 400;
+  --font-weight-medium: 500;
+  --font-weight-strong: 650;
+  --font-weight-bold: 700;
+
+  /* Typography scale */
+  --font-size-xs: 0.8125rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+
+  /* Spacing */
+  --gap: 0.75rem;
+  --variant-space: var(--space-4);
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+
+  /* Shape */
+  --border-width: 1px;
+  --radius-full: 9999px;
+  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
+
+  /* Motion — see reset.css for the prefers-reduced-motion hard reset.
+     --duration drives component transitions (hover/focus); the dedicated
+     animation rates below tune one-shot open/close and decorative loops. */
+  --duration: 150ms;
+  --duration-fast: 100ms;
+  --duration-slow: 200ms;
+  --duration-spin: 0.75s;
+  --duration-shimmer: 1.2s;
+  --ease: ease;
+
+  /* Focus ring — shared by every interactive component's :focus-visible */
+  --focus-outline: calc(var(--border-width) * 2) solid var(--focus);
+  --focus-outline-offset: 2px;
+
+  /* Status dot positioning — used by .avatar > .badge:empty. The offset is
+     the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
+     dot with the parent surface color. */
+  --indicator-offset: 14.65%;
+  --indicator-ring: var(--surface);
+
+  /* Shared backdrop — consumed by modal, drawer, and mobile flyout sheets. */
+  --backdrop-color: rgb(0 0 0);
+  --backdrop-opacity: 0.45;
+  --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity));
+
+  /* Progress / meter track height */
+  --bar-height: 0.65rem;
+
+  /* Controls — inputs and buttons share --control-size so heights always match.
+     .sm/.lg (variants.css) switch --control-size and --control-font-size. */
+  --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);
+  --disabled-opacity: 0.65;
+
+  /* Variant tuning — themes may adjust generated soft surfaces without
+     replacing the component rules. */
+  --soft-bg-mix: 88%;
+  --soft-border-mix: 65%;
+  --soft-hover-alpha: 12%;
+
+  /* Shared icons */
+  --icon-chevron-mask: 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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  --icon-check-mask: 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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  /* Native select uses background-image, which cannot inherit currentColor.
+     The stroke matches the default theme's text-subtle (hue 258 neutral). */
+  --icon-chevron-image: 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");
+
+  /* Viewport size tokens — fallback vh/vw with dvh/vi enhancement.
+     Consumed by full-viewport components (app-shell, drawer, modal, flyout).
+     Custom properties keep the fallback explicit while allowing modern units
+     to enhance the same public tokens. */
+  --viewport-block: 100vh;
+  --viewport-inline: 100vw;
+
+  /* Layering */
+  --z-sticky: 10;
+  --z-menu: 20;
+  --z-tooltip: 50;
+  --z-status: 60;
+}
+
+@supports (block-size: 100dvh) {
+  :root {
+    --viewport-block: 100dvh;
+  }
+}
+
+@supports (inline-size: 100vi) {
+  :root {
+    --viewport-inline: 100vi;
+  }
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  :root {
+    --shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--shadow-color) 8%, transparent);
+    --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
+    --backdrop-fill: color-mix(
+      in oklch,
+      var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),
+      transparent
+    );
+  }
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* Dark mode is progressive enhancement via light-dark(). Older browsers get
+   the light fallback rather than a partially dark native color scheme over
+   light tokens. */
+@supports not (color: light-dark(red, blue)) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    color-scheme: light;
+  }
+}
+
+/* Default palette — "ink & terra": aubergine primary, terracotta secondary,
+   pigment-toned statuses (sage, ochre, brick) tuned to equal perceived weight.
+   The neutral ramp (text, borders, subtle surfaces) is tinted toward the
+   primary hue (~260) so the whole page carries the identity, quietly. */
+
+/* Light fallback — also the default on browsers without light-dark() support. */
+:root,
+[data-theme="light"] {
+  /* Intent colors */
+  --primary: hsl(268 32% 33%);
+  --primary-fg: hsl(0 0% 98%);
+
+  --secondary: hsl(16 38% 38%);
+  --secondary-fg: hsl(0 0% 98%);
+
+  --success: hsl(150 40% 31%);
+  --success-fg: hsl(0 0% 98%);
+
+  --warning: hsl(36 68% 34%);
+  --warning-fg: hsl(0 0% 98%);
+
+  --danger: hsl(5 58% 43%);
+  --danger-fg: hsl(0 0% 98%);
+
+  --neutral: hsl(258 7% 43%);
+  --neutral-fg: hsl(0 0% 98%);
+
+  /* Surfaces */
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(262 24% 96%);
+  --surface-solid: hsl(261 16% 13%);
+
+  /* Text */
+  --text: hsl(261 20% 13%);
+  --text-muted: hsl(259 9% 42%);
+  --text-subtle: hsl(258 7% 57%);
+
+  /* Lines and focus */
+  --border: hsl(260 15% 88%);
+  --focus: var(--primary);
+  /* Pre-color-mix fallback only — superseded below by a derivation from
+     --focus so overriding --primary/--focus never leaves a stale ring. */
+  --focus-ring: hsl(268 32% 33% / 0.22);
+  --focus-ring-shadow: 0 0 0 3px var(--focus-ring);
+  --hover-overlay: hsl(260 20% 10% / 0.04);
+
+  /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
+  --radius: 0.5rem;
+  --radius-sm: 0.25rem;
+  --radius-lg: 0.75rem;
+
+  /* Shadow color — consumed by --shadow / --shadow-popout in tokens.css */
+  --shadow-color: hsl(260 25% 10%);
+
+  /* Heading and selection — derived from theme color tokens */
+  --heading: var(--text);
+  --selection-bg: var(--primary);
+  --selection-fg: var(--primary-fg);
+
+  /* hgroup internal gap */
+  --hgroup-gap: 0.25em;
+}
+
+/* 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. */
+[data-tone="dark"] {
+  --tone-fg: white;
+}
+
+[data-tone="light"] {
+  --tone-fg: var(--text);
+}
+
+/* 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. */
+@supports (color: color-mix(in oklch, red, white)) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --focus-ring: color-mix(in oklch, var(--focus) 22%, transparent);
+  }
+}
+
+/* Auto dark mode via light-dark(). Resolves based on the element's color-scheme:
+    :root (light dark) follows the OS, [data-theme="light"] forces light,
+    [data-theme="dark"] forces dark by overriding color-scheme.
+    Dark pastels sit a little lower and more chromatic (L 70-76, sat 38-45)
+    than usual so the palette stays warm rather than washed gray. */
+@supports (color: light-dark(red, blue)) {
+  :root,
+  [data-theme="light"] {
+    --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%));
+    --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%));
+
+    --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%));
+    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%));
+
+    --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%));
+    --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%));
+
+    --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%));
+    --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%));
+
+    --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%));
+    --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%));
+
+    --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%));
+    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%));
+    --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%));
+    --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%));
+    --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%));
+    --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
+
+    --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
+    --focus-ring: light-dark(hsl(268 32% 33% / 0.22), hsl(268 42% 76% / 0.28));
+    --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
+  }
+}
+
+@supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
+  :root,
+  [data-theme="light"] {
+    --focus-ring: light-dark(
+      color-mix(in oklch, var(--focus) 22%, transparent),
+      color-mix(in oklch, var(--focus) 28%, transparent)
+    );
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --focus-outline: calc(var(--border-width) * 2) solid Highlight;
+    --focus-ring-shadow: none;
+
+    --backdrop-fill: Canvas;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --border-width: 2px;
+    --focus-outline-offset: 3px;
+    --focus-ring-shadow: 0 0 0 4px var(--focus-ring);
+    --text-muted: var(--text);
+    --text-subtle: var(--text);
+  }
+}
+
+/*
+ * Base element styles for native HTML semantics.
+ *
+ * Sits between reset (browser defaults) and prose (rich content scope).
+ * These styles apply everywhere — cards, dialogs, heroes — not only in prose.
+ */
+
+body {
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-sans);
+  line-height: var(--line-height);
+}
+
+a {
+  color: inherit;
+  text-underline-offset: 0.18em;
+}
+
+a:focus-visible {
+  box-shadow: var(--focus-ring-shadow);
+}
+
+@media (hover: hover) {
+  a:hover {
+    text-decoration-thickness: 0.12em;
+  }
+}
+
+/* Global heading chrome: color (--heading or inherit), a tight line-height,
+   and progressive text-wrap. No font-size or font-weight is set globally —
+   components and .prose own the per-context scale. */
+:where(h1, h2, h3, h4, h5, h6) {
+  color: var(--heading, inherit);
+  line-height: var(--line-height-tight);
+  text-wrap: balance;
+}
+
+/* Compact heading groups. Structural only: display, gap, internal margin reset.
+   No font-size, color, or weight is applied here. */
+hgroup {
+  display: grid;
+  gap: var(--hgroup-gap);
+}
+
+hgroup > * {
+  margin-block: 0;
+}
+
+hr {
+  border: 0;
+  border-block-start: var(--border-width) solid var(--border);
+  margin-block: var(--space-6);
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--font-mono);
+}
+
+small {
+  font-size: 0.875em;
+}
+
+::selection {
+  background: var(--selection-bg, var(--primary));
+  color: var(--selection-fg, var(--primary-fg));
+}
+
+/*
+ * Intent classes do not style elements directly.
+ * They only expose --intent and --intent-fg.
+ * Components and variants decide how to consume them. Each component that
+ * consumes --intent or --ui-* must open a local intent boundary in a :where()
+ * block that resets --intent / --intent-fg / --ui-* to initial. Parent intents
+ * do not leak into nested components. Local intent classes (.primary, .danger,
+ * etc.) still apply because they have higher specificity than :where().
+ */
+.primary {
+  --intent: var(--primary);
+  --intent-fg: var(--primary-fg);
+}
+.secondary {
+  --intent: var(--secondary);
+  --intent-fg: var(--secondary-fg);
+}
+.success {
+  --intent: var(--success);
+  --intent-fg: var(--success-fg);
+}
+.warning {
+  --intent: var(--warning);
+  --intent-fg: var(--warning-fg);
+}
+.danger {
+  --intent: var(--danger);
+  --intent-fg: var(--danger-fg);
+}
+.neutral {
+  --intent: var(--neutral);
+  --intent-fg: var(--neutral-fg);
+}
+
+.container-query {
+  container-type: inline-size;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+}
+
+.stack > * {
+  margin: 0;
+}
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--cluster-align, center);
+  justify-content: var(--cluster-justify, flex-start);
+  gap: var(--gap);
+}
+
+.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 (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;
+    }
+  }
+}
+
+.grid {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
+}
+
+/* Query-container wrapper that opts .grid-2/3/4/6 into responsive
+ * collapse. Wrap a .grid-2/3/4/6 inside .container-query to make the
+ * column count collapse on narrow wrappers. Without this wrapper,
+ * .grid-2/3/4/6 stay at their full column count. */
+/* Fixed-column grids at their full count by default.
+ *   .grid-2: 2 cols
+ *   .grid-3: 3 cols
+ *   .grid-4: 4 cols
+ *   .grid-6: 6 cols
+ * When placed inside .container-query, the column count collapses
+ * on narrow wrappers. The intermediate 2-col step applies to
+ * .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: 1 col -> 2 cols
+ *   .grid-3: 1 col -> 2 cols -> 3 cols
+ *   .grid-4: 1 col -> 2 cols -> 4 cols
+ *   .grid-6: 2 cols -> 3 cols -> 6 cols */
+.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 (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. Component-specific defaults (.btn solid-by-default, .badge
+ * solid-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 solid
+ *   components/alert.css   — .alert default + .alert.solid/.alert.outline
+ *
+ * .sm/.lg set shared size tokens. Controls consume --control-*; non-control
+ * components may consume --variant-* when the variant should affect their
+ * local density. Compact components may consume --variant-compact-*.
+ * Components with bespoke sizing (spinner, avatar) define local .sm/.lg;
+ * applying .sm/.lg to card, dialog, accordion, navbar, table is
+ * a no-op.
+ *
+ * Intent list source of truth: intents.css. Components consume --intent* tokens
+ * instead of re-listing intent classes.
+ */
+.solid {
+  --ui-bg: var(--intent, var(--neutral));
+  --ui-fg: var(--intent-fg, var(--neutral-fg));
+  --ui-border: transparent;
+}
+
+.soft {
+  --ui-bg: var(--surface-subtle);
+  --ui-border: var(--border);
+  --ui-fg: var(--intent, var(--text));
+}
+
+.outline {
+  --ui-bg: transparent;
+  --ui-fg: var(--intent, var(--text));
+  --ui-border: var(--intent, var(--border));
+}
+
+.sm {
+  --gap: var(--space-2);
+  --variant-space: var(--space-2);
+  --control-size: var(--control-size-sm);
+  --control-font-size: var(--font-size-sm);
+  --variant-font-size: var(--font-size-sm);
+  --variant-icon-size: 1rem;
+  --variant-pad-block: var(--space-3);
+  --variant-compact-size: 1.25rem;
+  --variant-compact-font-size: 0.75rem;
+}
+.lg {
+  --gap: var(--space-5);
+  --variant-space: var(--space-5);
+  --control-size: var(--control-size-lg);
+  --control-font-size: var(--font-size-lg);
+  --variant-font-size: var(--font-size-lg);
+  --variant-icon-size: 1.5rem;
+  --variant-pad-block: var(--space-5);
+  --variant-compact-size: 1.875rem;
+  --variant-compact-font-size: var(--font-size-sm);
+}
+
+/* Modern color enhancement. Baseline variant values above remain usable
+   everywhere. Interactive states live in the components that consume them. */
+@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-border: color-mix(
+      in oklch,
+      var(--surface) var(--soft-border-mix),
+      var(--intent, var(--neutral))
+    );
+    /* @sync soft-recipe */
+  }
+}
+
+/* Interactive hover recipe shared by .btn and .badge. Declared outside :hover
+   on purpose: --ui-hover-bg is only consumed inside their @media (hover: hover)
+   rules, so these values are inert until hovered. :is() carries real
+   specificity so the components' :where() intent boundaries
+   (--ui-hover-bg: initial) cannot override the recipe. The solid/soft overlay
+   darkening lives in the consuming components. */
+:is(.btn, a.badge, button.badge):is(.outline, .ghost) {
+  --ui-hover-bg: var(--surface-subtle);
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  /* Solid has no literal class requirement: bare .btn/.badge default to solid,
+     so this must match anything that isn't one of the other variants rather
+     than an explicit .solid class. Stacks with the box-shadow overlay the
+     consuming components apply on top for extra depth. */
+  :is(.btn, a.badge, button.badge):not(:where(.soft, .outline, .ghost, .link)) {
+    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
+  }
+
+  /* Same recipe as the resting .soft bg with the surface share reduced by
+     --soft-hover-alpha: stays opaque, so it reads on any backdrop instead of
+     letting the container show through on hover. */
+  :is(.btn, a.badge, button.badge):is(.soft) {
+    --ui-hover-bg: color-mix(
+      in oklch,
+      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
+      var(--intent, var(--neutral))
+    );
+  }
+
+  /* Mixed against the opaque --surface-subtle rather than transparent: a
+     transparent-based tint reads clean on light surfaces but goes muddy and
+     low-contrast on dark ones, since the same low alpha lands very
+     differently over a light vs. a near-black backdrop. */
+  :is(.btn, a.badge, button.badge):is(.outline) {
+    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
+  }
+
+  :is(.btn, a.badge, button.badge):is(.ghost) {
+    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--text)) 8%, transparent);
+  }
+}
+
+/*
+ * 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.
+ */
+
+.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;
+}
+
+@media (hover: hover) {
+  .prose a:hover {
+    text-decoration-thickness: 0.12em;
+  }
+
+  @supports (color: color-mix(in oklch, red, white)) {
+    .prose a:hover {
+      color: color-mix(in oklch, var(--primary), var(--text) 15%);
+    }
+  }
+}
+
+.prose :where(ul, ol) {
+  padding-inline-start: 1.5em;
+}
+
+.prose li + li {
+  margin-block-start: 0.35em;
+}
+
+.prose code {
+  padding: 0.15em 0.3em;
+  border-radius: var(--radius-sm);
+  background: var(--surface-subtle);
+  color: var(--text);
+  font-size: 0.875em;
+}
+
+.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.
+ */
+
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.btn) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.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-focus-outline-width: calc(var(--border-width) * 2);
+  --btn-hover-bg: var(--ui-hover-bg, var(--btn-bg));
+  --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  min-block-size: var(--btn-min-size);
+  padding-block: var(--space-2);
+  padding-block: max(var(--space-1), 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-strong);
+  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);
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .btn {
+    --btn-focus-ring-color: color-mix(in oklch, var(--btn-focus-color) 28%, transparent);
+  }
+}
+
+/* .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;
+}
+
+/* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is shared with
+   .badge in variants.css; the overlay darkening for solid/soft is .btn-specific. */
+@media (hover: hover) {
+  .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
+    background: var(--btn-hover-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. */
+
+@media (hover: hover) {
+  .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: var(--btn-focus-outline-width) solid var(--btn-focus-color);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: 0 0 0 3px var(--btn-focus-ring-color, var(--focus-ring));
+}
+
+.btn.link:focus-visible {
+  outline-color: currentColor;
+  outline-offset: 0.2em;
+}
+
+.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-size: 1em;
+  --spinner-width: 0.15em;
+}
+
+/* Toggle */
+/* State must outrank the shared .outline/.ghost hover recipes: a pressed
+   button keeps its intent background and foreground while hovered. */
+.btn:is([aria-pressed="true"], [aria-current]:not([aria-current="false"])):not(.link) {
+  --btn-bg: var(--intent, var(--primary));
+  --btn-fg: var(--intent-fg, var(--primary-fg));
+  --btn-border: var(--intent, var(--primary));
+  --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]:not([aria-current="false"])):not(.link) {
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  @media (hover: hover) {
+    .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.
+ *
+ * Solid by default. Shared .soft/.outline variants stay available for quieter
+ * tags without adding a badge-specific color API.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.badge) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.badge {
+  --badge-size: var(--variant-compact-size, 1.5rem);
+  --badge-pad-x: 0.55em;
+  --badge-font-size: var(--variant-compact-font-size, 0.8125rem);
+  --badge-dot-size: 0.5rem;
+  --badge-bg: var(--ui-bg, var(--intent, var(--neutral)));
+  --badge-fg: var(--ui-fg, var(--intent-fg, var(--neutral-fg)));
+  --badge-border: var(--ui-border, transparent);
+  --badge-radius: 999px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35em;
+  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);
+}
+
+.badge:empty {
+  --badge-size: var(--badge-dot-size);
+  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;
+}
+
+@media (hover: hover) {
+  .badge > button:not(:disabled):hover {
+    background: var(--hover-overlay);
+  }
+}
+
+/* .solid/.soft/.outline are shared via variants.css, including the
+   .soft/.outline hover recipe (--ui-hover-bg). The --badge-* fallbacks make
+   .badge solid by default. */
+@media (hover: hover) {
+  :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;
+  font: inherit;
+}
+
+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 {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  .badge:empty {
+    background: ButtonText;
+  }
+
+  @media (hover: hover) {
+    :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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.alert) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.alert {
+  --alert-pad-block: var(--variant-pad-block, var(--space-4));
+  --alert-pad-inline: var(--space-4);
+  --alert-font-size: var(--variant-font-size, var(--font-size-md));
+  --alert-icon-size: var(--variant-icon-size, 1.25rem);
+  --alert-bg: var(--surface-subtle);
+  --alert-border: var(--border);
+  --ui-bg: var(--alert-bg);
+  --ui-border: var(--alert-border);
+  --ui-fg: var(--intent, var(--text));
+
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+  background: var(--ui-bg, transparent);
+  color: var(--ui-fg, var(--text));
+  border: var(--border-width) solid var(--ui-border, var(--border));
+  border-inline-start-color: var(
+    --alert-border-inline-start-color,
+    var(--ui-border, var(--border))
+  );
+  border-inline-start-width: var(--alert-border-inline-start-width, var(--border-width));
+  border-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. Use .solid or .outline for stronger emphasis. */
+.alert.solid {
+  --ui-bg: var(--intent, var(--neutral));
+  --ui-fg: var(--intent-fg, var(--neutral-fg));
+  --ui-border: transparent;
+}
+
+.alert.outline {
+  --ui-bg: transparent;
+  --ui-fg: var(--intent, var(--text));
+  --ui-border: var(--intent, var(--border));
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .alert:where(:not(.solid, .outline)) {
+    /* @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 */
+.alert > :first-child[aria-hidden="true"] {
+  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;
+}
+
+@supports selector(.alert:has(> *)) {
+  .alert:has(> :first-child[aria-hidden="true"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: var(--items-align, start);
+    column-gap: var(--space-3);
+  }
+
+  .alert:has(> :first-child[aria-hidden="true"]) > :first-child {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--alert-icon-size);
+    block-size: var(--alert-icon-size);
+    margin-block-start: 0.125em;
+    font-size: var(--alert-icon-size);
+    line-height: 1;
+  }
+
+  .alert:has(> :first-child[aria-hidden="true"]) > :first-child:is(svg, i) {
+    inline-size: var(--alert-icon-size);
+    block-size: var(--alert-icon-size);
+  }
+
+  .alert:has(> :first-child[aria-hidden="true"]) > :not(:first-child) {
+    grid-column: 2;
+  }
+}
+
+/* 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. */
+
+/*
+ * Actions — a horizontal action-button cluster.
+ *
+ * Composes with .btn (or any inline element) and feeds layout via the shared
+ * --gap token.
+ */
+.actions {
+  --gap: var(--space-2);
+
+  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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.card) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.card {
+  --card-pad: var(--space-4);
+  --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));
+  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-3);
+  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.inverted {
+  background: var(--surface-solid);
+  color: var(--surface);
+  border-color: transparent;
+  --heading: var(--surface);
+  --busy-overlay-bg: var(--surface-solid);
+}
+
+.card.compact {
+  --card-pad: var(--space-2);
+}
+
+/* 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);
+}
+
+@media (forced-colors: active) {
+  .card {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  .card.raised {
+    box-shadow: none;
+  }
+
+  .card.inverted {
+    --heading: CanvasText;
+
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
+/*
+ * 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, 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, ease),
+      display var(--duration) allow-discrete;
+  }
+}
+
+@media (forced-colors: active) {
+  .surface-backdrop {
+    background: Canvas;
+  }
+}
+
+/*
+ * 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.
+ */
+dialog.modal {
+  --modal-size: 32rem;
+
+  max-inline-size: min(100% - 2rem, var(--modal-size));
+  max-block-size: calc(var(--viewport-block) - 2rem);
+  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-4);
+  max-block-size: calc(var(--viewport-block) - 2rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--space-4);
+}
+
+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;
+}
+
+dialog.modal footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--gap);
+}
+
+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-modal-static 180ms var(--ease);
+  }
+
+  ::view-transition-group(actual-dialog) {
+    animation-duration: var(--duration);
+    animation-timing-function: var(--ease);
+  }
+}
+
+@keyframes actual-modal-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;
+  }
+}
+
+/*
+ * 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.
+ */
+dialog.drawer {
+  --drawer-size: 20rem;
+  --drawer-pad: var(--space-4);
+  --drawer-closed-translate: -100%;
+
+  inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size));
+  block-size: var(--viewport-block);
+  max-inline-size: none;
+  max-block-size: var(--viewport-block);
+  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-4);
+  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 {
+    border-inline-end-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  dialog.drawer[data-side="end"] {
+    border-inline-start-color: ButtonText;
+  }
+
+  dialog.drawer::backdrop {
+    background: Canvas;
+  }
+}
+
+
+/* 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"].
+ * --flyout-trigger-width is set by surface.js while an open flyout is positioned.
+ */
+
+.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 {
+  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-1));
+  inset-inline-start: 0;
+  display: grid;
+  gap: var(--space-1);
+  inline-size: var(--flyout-inline-size, max-content);
+  min-inline-size: min(
+    var(--flyout-trigger-width, 0px),
+    min(var(--flyout-max-inline-size, 20rem), calc(var(--viewport-inline) - var(--space-6)))
+  );
+  max-inline-size: min(
+    var(--flyout-max-inline-size, 20rem),
+    calc(var(--viewport-inline) - var(--space-6))
+  );
+  max-block-size: min(24rem, var(--available-height, calc(var(--viewport-block) - var(--space-6))));
+  overflow: auto;
+  margin: 0;
+  padding: var(--space-1);
+  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(--duration)) var(--ease, ease),
+    scale var(--duration-fast, var(--duration)) var(--ease, ease),
+    translate var(--duration-fast, var(--duration)) var(--ease, 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 {
+  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-3), env(safe-area-inset-top)) var(--space-3)
+    max(var(--space-3), 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-3);
+}
+
+@starting-style {
+  .flyout.is-sheet.is-open {
+    scale: 1;
+    translate: 0 var(--space-3);
+  }
+}
+
+@supports (transition-behavior: allow-discrete) {
+  .flyout {
+    transition:
+      opacity var(--duration-fast, var(--duration)) var(--ease, ease),
+      scale var(--duration-fast, var(--duration)) var(--ease, ease),
+      translate var(--duration-fast, var(--duration)) var(--ease, ease),
+      display var(--duration-fast, var(--duration)) allow-discrete;
+  }
+}
+
+.flyout > li {
+  margin: 0;
+}
+
+.flyout > :where(section, footer) {
+  min-inline-size: 0;
+  padding: var(--space-2);
+}
+
+.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-1);
+  margin: var(--space-1) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.flyout > section > ul > li {
+  margin: 0;
+}
+
+/* Item contract: a button, link, or menuitem placed directly in the flyout
+   or directly in any of its <li> (bare list, or grouped section > ul > li).
+   menu.js mirrors this contract in MENU_ITEM_SELECTOR — keep them in sync.
+   :where(li) keeps specificity at a single class (0,1,0) so consumer
+   overrides behave the same as a plain .flyout > rule. */
+:is(.flyout, .flyout :where(li)) > :where(button, a, [role="menuitem"]) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  inline-size: 100%;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-weight: var(--font-weight);
+  text-decoration: none;
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+:is(.flyout.is-sheet, .flyout.is-sheet :where(li)) > :where(button, a, [role="menuitem"]) {
+  min-block-size: var(--control-size-lg);
+}
+
+:is(.flyout, .flyout :where(li)) > :where(button, a, [role="menuitem"]):focus-visible {
+  background: var(--surface-subtle);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+:is(.flyout, .flyout :where(li))
+  > :where(button, a, [role="menuitem"]):is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+:is(.flyout, .flyout :where(li)) > :where(a, [role="menuitem"])[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+@media (hover: hover) {
+  :is(.flyout, .flyout :where(li))
+    > :where(button, a, [role="menuitem"]):hover:not(
+      :where(:focus-visible, :disabled, [aria-disabled="true"])
+    ) {
+    background: var(--surface-subtle);
+    outline: none;
+  }
+}
+
+.flyout > hr,
+.flyout > li > hr {
+  inline-size: 100%;
+  margin: 0;
+  margin-block: var(--space-1);
+  border: 0;
+  border-block-start: var(--border-width) solid var(--border);
+}
+
+@media (forced-colors: active) {
+  .flyout {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  :is(.flyout, .flyout :where(li)) > :where(button, a, [role="menuitem"]):focus-visible {
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  @media (hover: hover) {
+    :is(.flyout, .flyout :where(li))
+      > :where(button, a, [role="menuitem"]):hover:not(:where(:disabled, [aria-disabled="true"])) {
+      outline: var(--border-width) solid ButtonText;
+      outline-offset: -1px;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+}
+
+/*
+ * 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.
+ */
+.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(--duration)) var(--ease, ease),
+    scale var(--duration-fast, var(--duration)) var(--ease, 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(--duration)) var(--ease, ease),
+      scale var(--duration-fast, var(--duration)) var(--ease, ease),
+      display var(--duration-fast, var(--duration)) 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;
+
+    border: var(--border-width) solid ButtonText;
+  }
+
+  .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.
+ */
+.accordion {
+  --accordion-radius: var(--radius);
+
+  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-3);
+  cursor: pointer;
+  list-style: none;
+  padding: var(--space-4);
+  color: var(--text);
+  font-weight: var(--font-weight-bold);
+}
+
+.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(--text-muted);
+  -webkit-mask-image: var(--icon-chevron-mask);
+  mask-image: var(--icon-chevron-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+  transition: transform var(--duration);
+}
+
+.accordion details[open] summary::after {
+  transform: rotate(180deg);
+}
+
+.accordion details > summary + * {
+  padding-block: 0 var(--space-4);
+  padding-inline: var(--space-4);
+  color: var(--text-muted);
+  margin-block: 0;
+}
+
+.accordion details[open] > summary + * {
+  padding-block-start: var(--space-1);
+}
+
+.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 {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  .accordion > details + details {
+    border-block-start-color: ButtonText;
+  }
+
+  .accordion summary {
+    color: CanvasText;
+  }
+
+  .accordion summary::after {
+    background-color: ButtonText;
+    forced-color-adjust: none;
+  }
+}
+
+
+/* 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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.spinner) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.spinner {
+  --spinner-size: 1.5rem;
+  --spinner-width: 2px;
+  --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: 1rem;
+}
+
+.spinner.lg {
+  --spinner-size: 3rem;
+  --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.
+ */
+.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).
+ */
+[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 {
+    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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.progress) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.progress {
+  --progress-track: var(--surface-subtle);
+  --progress-value: var(--intent, var(--primary));
+}
+
+.progress {
+  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 {
+    border: var(--border-width) solid ButtonText;
+    background: Canvas;
+  }
+
+  .progress::-webkit-progress-bar {
+    background: Canvas;
+  }
+
+  .progress::-webkit-progress-value {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .progress::-moz-progress-bar {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .progress:indeterminate {
+    background: Canvas;
+  }
+}
+
+/*
+ * 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.
+ *
+ * Public API: .status-bar + [data-status], both required — status.js reads
+ * the class name from js/selectors.js rather than hardcoding it, but still
+ * needs it to scope its document-wide lookup away from unrelated elements
+ * that carry their own generic `data-status`.
+ */
+
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.status-bar) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.status-bar {
+  --status-bg: var(--intent, var(--text));
+  --status-fg: var(--intent-fg, var(--surface));
+
+  position: fixed;
+  inset-block-end: var(--space-4);
+  inset-inline: var(--space-4);
+  z-index: var(--z-status, 60);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  inline-size: fit-content;
+  max-inline-size: min(calc(100vw - var(--space-6)), 32rem);
+  margin-inline: auto;
+  overflow-wrap: anywhere;
+
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+
+  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, ease),
+    scale var(--duration-slow) var(--ease, ease),
+    translate var(--duration-slow) var(--ease, ease);
+}
+
+.status-bar:empty {
+  opacity: 0;
+  scale: 0.96;
+  translate: 0 var(--space-2);
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  .status-bar {
+    border: var(--border-width) solid ButtonText;
+    box-shadow: 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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.avatar) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.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);
+}
+
+@media (hover: hover) {
+  :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.
+ */
+.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) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.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.
+ */
+.navbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  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-2);
+  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-1);
+  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-2);
+  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);
+}
+
+@media (hover: hover) {
+  .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(--gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  --gap: var(--space-2);
+}
+
+.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;
+  }
+
+  @media (hover: hover) {
+    .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-1);
+  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-1);
+}
+
+.breadcrumb li + li::before {
+  content: "/";
+  color: var(--text-subtle);
+}
+
+.breadcrumb a {
+  color: var(--text-muted);
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .breadcrumb
+    li:not(:where([aria-current]:not([aria-current="false"])))
+    > a:hover:not(:where([aria-current]:not([aria-current="false"]))) {
+    color: var(--text);
+    text-decoration: underline;
+  }
+}
+
+.breadcrumb a:focus-visible {
+  border-radius: var(--radius-sm);
+}
+
+.breadcrumb a:where([aria-current]:not([aria-current="false"])) {
+  color: var(--text);
+  font-weight: var(--font-weight-medium);
+}
+
+.breadcrumb li:where([aria-current]:not([aria-current="false"])) > :where(a, span) {
+  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-1);
+  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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.tab) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  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;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-3);
+  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-4);
+}
+
+.tab:is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+@media (hover: hover) {
+  .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
+    color: var(--text);
+  }
+}
+
+.tab:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+}
+
+.tab[aria-selected="true"],
+.tab[aria-current]:not([aria-current="false"]),
+.tab[aria-pressed="true"] {
+  border-block-end-color: var(--intent, var(--primary));
+  color: var(--intent, var(--primary));
+}
+
+.tabs[aria-orientation="vertical"] .tab[aria-selected="true"],
+.tabs[aria-orientation="vertical"] .tab[aria-current]:not([aria-current="false"]),
+.tabs[aria-orientation="vertical"] .tab[aria-pressed="true"] {
+  border-block-end-color: transparent;
+  border-inline-end-color: var(--intent, var(--primary));
+}
+
+@media (forced-colors: active) {
+  .tabs {
+    border-block-end-color: ButtonText;
+  }
+
+  .tabs[aria-orientation="vertical"] {
+    border-block-end-color: transparent;
+    border-inline-end-color: ButtonText;
+  }
+
+  .tab {
+    color: ButtonText;
+  }
+
+  @media (hover: hover) {
+    .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
+      color: ButtonText;
+      text-decoration: underline;
+      text-underline-offset: 0.18em;
+    }
+  }
+
+  .tab[aria-selected="true"],
+  .tab[aria-current]:not([aria-current="false"]),
+  .tab[aria-pressed="true"] {
+    border-block-end-color: Highlight;
+    color: Highlight;
+  }
+
+  .tabs[aria-orientation="vertical"] .tab[aria-selected="true"],
+  .tabs[aria-orientation="vertical"] .tab[aria-current]:not([aria-current="false"]),
+  .tabs[aria-orientation="vertical"] .tab[aria-pressed="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 IntersectionObserver or
+ * :target-current is unavailable.
+ */
+
+@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.
+ */
+.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-3);
+
+  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);
+}
+
+@media (hover: hover) {
+  .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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.meter) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.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 {
+    border: var(--border-width) solid ButtonText;
+    background: Canvas;
+  }
+
+  .meter::-webkit-meter-bar {
+    border: 0;
+    background: Canvas;
+  }
+
+  .meter::-webkit-meter-optimum-value,
+  .meter::-webkit-meter-suboptimum-value,
+  .meter::-webkit-meter-even-less-good-value,
+  .meter::-moz-meter-bar {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+}
+
+/* Forms — import order matters: switch.css must follow choice.css so its
+   :not([role="switch"]) exclusion in choice.css still applies.
+   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.
+ */
+.field {
+  display: grid;
+  gap: var(--space-1);
+  color: var(--text);
+}
+
+.field-group {
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--space-3);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+}
+
+.field-group + .field-group {
+  margin-block-start: var(--space-4);
+}
+
+.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-1));
+  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.
+ */
+.input,
+.textarea,
+.select {
+  --control-border: var(--border);
+  --control-bg: var(--surface);
+  --control-fg: var(--text);
+  --control-ring: none;
+  --control-cursor: auto;
+  --control-opacity: 1;
+
+  appearance: none;
+  inline-size: 100%;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-3);
+  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);
+  box-shadow: var(--control-ring);
+  cursor: var(--control-cursor);
+  opacity: var(--control-opacity);
+  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-2);
+  resize: vertical;
+}
+
+@media (hover: hover) {
+  .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: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  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(--text-subtle);
+  --control-border: var(--border);
+  --control-cursor: not-allowed;
+  --control-opacity: 1;
+}
+
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--text-muted);
+}
+
+@media (forced-colors: active) {
+  .input:focus-visible,
+  .textarea:focus-visible,
+  .select:focus-visible {
+    box-shadow: none;
+  }
+}
+
+/*
+ * Input Icon — leading decorative icon inside a relative wrapper.
+ *
+ * Icon-library agnostic: selects the wrapper's first child rather than a
+ * specific tag, so it works with an <i> webfont icon, an inline <svg>, or a
+ * <span>. Sizes with --variant-icon-size (variants.css) so .sm/.lg pick up
+ * the same icon scale used elsewhere (alert.css); the input's start padding
+ * grows to match so text never runs under the icon.
+ */
+.input-icon {
+  --input-icon-size: var(--variant-icon-size, 1.25rem);
+
+  display: block;
+  position: relative;
+}
+
+.input-icon > :first-child {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--space-3);
+  transform: translateY(-50%);
+  font-size: var(--input-icon-size);
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+/* 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:first-child {
+  inline-size: var(--input-icon-size);
+  block-size: var(--input-icon-size);
+}
+
+.input-icon > .input {
+  padding-inline-start: calc(var(--space-3) * 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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.choice, .check, .radio) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+/* A classed .choice is the component surface. Let its nested 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-2);
+  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;
+}
+
+.choice:has(:disabled) {
+  color: var(--text-subtle);
+  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-inline: 0;
+  margin-block-end: 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:checked,
+.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 {
+  --choice-border: var(--intent, var(--primary));
+  --choice-bg: var(--intent, var(--primary));
+  --choice-mark: var(--intent-fg, var(--primary-fg));
+}
+
+.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);
+}
+
+@media (hover: hover) {
+  .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: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.check:disabled,
+.radio:disabled {
+  --choice-bg: var(--surface-subtle);
+  --choice-border: var(--border);
+  --choice-mark: var(--text-subtle);
+  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> with a hidden native input. Both radio and
+ * checkbox show a checkmark badge on selection: round for radio, rounded
+ * square for checkbox. Pair with grid or flex utilities for group layout.
+ */
+:where(.choice-card) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.choice-card {
+  --choice-card-pad: var(--variant-space, var(--space-4));
+  --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(--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). */
+.choice-card > input {
+  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: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.choice-card:has(:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .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 — circle for radio, rounded square for checkbox */
+.choice-card:has(:checked)::before {
+  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);
+  background: var(--intent, var(--primary));
+  z-index: 1;
+  box-shadow: 0 0 0 2px var(--surface);
+}
+
+.choice-card:has(input[type="radio"]:checked)::before {
+  border-radius: var(--radius-full);
+}
+
+.choice-card:has(input[type="checkbox"]:checked)::before {
+  border-radius: var(--radius-sm);
+}
+
+.choice-card:has(:checked)::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);
+  background: var(--intent-fg, var(--primary-fg));
+  mask: var(--icon-check-mask) center / 60% no-repeat;
+  -webkit-mask: var(--icon-check-mask) center / 60% no-repeat;
+  z-index: 2;
+}
+
+@media (forced-colors: active) {
+  .choice-card {
+    --choice-card-border: ButtonText;
+    --choice-card-bg: Canvas;
+  }
+
+  .choice-card:has(:checked) {
+    --choice-card-border: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .choice-card:has(:checked)::before {
+    background: Highlight;
+    box-shadow: 0 0 0 2px Canvas;
+  }
+
+  .choice-card:has(input[type="radio"]:checked)::before {
+    border-radius: var(--radius-full);
+  }
+
+  .choice-card:has(input[type="checkbox"]:checked)::before {
+    border-radius: var(--radius-sm);
+  }
+
+  .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:is(:not([multiple], [size]), :not([multiple])[size="1"]) {
+  appearance: none;
+  padding-inline-end: calc(var(--space-3) + var(--space-6));
+  background-image: var(--icon-chevron-image);
+  background-position: center right var(--space-3);
+  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:is(:not([multiple], [size]), :not([multiple])[size="1"]):dir(rtl) {
+  background-position: center left var(--space-3);
+}
+
+/* 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:is(:not([multiple], [size]), :not([multiple])[size="1"]) {
+    appearance: auto;
+    background-image: none;
+    padding-inline-end: var(--space-3);
+  }
+}
+
+/*
+ * 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.
+ */
+@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-2);
+        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-2);
+        padding-inline: var(--space-3);
+        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-image: var(--icon-check-mask);
+          mask-image: var(--icon-check-mask);
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-size: contain;
+          mask-size: contain;
+          -webkit-mask-position: center;
+          mask-position: center;
+        }
+      }
+
+      & optgroup {
+        padding-block-start: 0.5em;
+
+        & option:first-child {
+          margin-block-start: 0.5em;
+        }
+      }
+    }
+  }
+}
+
+/*
+ * Native-only control polish: file and range inputs that defeat most custom
+ * styling, so the framework stays out of their way and just keeps them readable
+ * and theme-aware.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.range) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.file {
+  color: var(--text-muted);
+}
+
+.file::file-selector-button {
+  margin-inline-end: var(--space-3);
+  padding-block: var(--space-1);
+  padding-inline: var(--space-2);
+  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;
+}
+
+@media (hover: hover) {
+  .file:not(:disabled)::file-selector-button:hover {
+    background: var(--border);
+  }
+}
+
+.range {
+  inline-size: 100%;
+  accent-color: var(--intent, var(--primary));
+}
+
+.file:focus-visible,
+.range:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+@media (forced-colors: active) {
+  .file:focus-visible,
+  .range:focus-visible {
+    box-shadow: none;
+  }
+}
+
+/*
+ * 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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.switch) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.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);
+}
+
+@media (hover: hover) {
+  .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: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.switch:disabled {
+  --switch-bg: var(--surface-subtle);
+  --switch-border: var(--border);
+  --switch-knob: var(--text-subtle);
+  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.
+ */
+
+.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 background so both border and fill signal
+   danger instead of showing a red border around a primary-colored control. */
+.check[aria-invalid="true"]:is(:checked, :indeterminate),
+.radio[aria-invalid="true"]:checked {
+  --choice-bg: var(--danger);
+}
+
+.switch[aria-invalid="true"]:checked {
+  --switch-bg: 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;
+  }
+}
+
+/*
+ * 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.
+ */
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  align-items: center;
+  margin-block-start: var(--form-actions-margin-block-start, var(--space-5));
+}
+
+/* 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-3));
+
+  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;
+}
+
+.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;
+}
+
+@media (hover: hover) {
+  .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-4, 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(--variant-space);
+}
+
+/* Padding — inline (horizontal) */
+.px {
+  padding-inline: var(--variant-space);
+}
+
+/* Margin — block-start */
+.mbs {
+  margin-block-start: var(--variant-space);
+}
+
+/* Margin — block-end */
+.mbe {
+  margin-block-end: var(--variant-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.
+ */
+.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-3);
+  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: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  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 — loaded after components so its legacy fallback also covers
+   controls that reset their native outline. Modern browsers hide it for focus
+   that is not keyboard-relevant; components layer local state on top. */
+:focus {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+@supports selector(:focus-visible) {
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+@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;
+  }
+}