@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/controls-core.css

@@ -0,0 +1,2261 @@
+/* ==========================================================================
+   @digithings-ai/ui — chat-dress control CSS (styles/controls-core.css).
+
+   The legacy controls layer (`components/controls/*`, #1419) was retired in
+   batch K3 (#4306). What the kit still emits lives here: the chat dress
+   (`.ctl-btn-chat*`, `.ctl-badge-chat*`, `.ctl-input-chat`, `.ctl-label-chat`)
+   and the kit Card's `.ctl-card-*` part rules. The rest of the sheet is
+   historical. The #1548 families carry the reference
+   dress, plus dashboard's shipped dresses where the two differ (nb-pager
+   "capsule", nb-seg "accent" — see the NavButtons dresses section); they
+   follow the same layering split as the chat dress — single-class defaults
+   in @layer components, state/structural rules unlayered.
+
+   Every control carries TWO dresses (per the E3 ruling — API compatibility
+   beats aesthetic purity, digichat's rendered look must be reproducible
+   exactly):
+
+   - the REFERENCE dress (`*-ref` classes, the default): the design-reference
+     controls grammar, value-for-value copies of the specimen CSS —
+     .btn-primary / .btn-ghost / .btn-quiet / .btn-danger / .btn-icon
+     (reference/app/globals.css + styles/nav-shell.css), .ff-input
+     (reference/app/controls/controls.css), and the .dg-tier badge
+     (styles/web-theme.css). Mono type, radius 0, hairline borders,
+     srgb color-mix — kept verbatim so a specimen swap is pixel-faithful.
+
+   - the CHAT dress (`*-chat` classes): digichat's current shadcn-derived
+     control dress translated utility-for-utility from
+     digichat/src/components/ui/{button,badge,card,input,label,avatar}.tsx.
+     digichat's shadcn vars all resolve to canon tokens (#1403 reverse
+     bridge), so each rule reads `var(--shadcn-slot, var(--canon-token))`:
+     exact inside digichat (where the slot vars exist), canonical fallback
+     everywhere else. Opacity washes use `color-mix(in oklab, …)` — the
+     exact color space Tailwind v4 emits for `/NN` modifiers — so the
+     rendered pixels match digichat's current build. Dark rules key off
+     [data-theme="dark"], which digichat keeps in lockstep with its legacy
+     `.dark` class.
+
+   Wiring — import AFTER the token bridge in the app's globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/controls-core.css";
+   The controls components carry NO Tailwind utilities (all dress lives
+   here, keyed off data-slot / data-size / aria state), so no @source line
+   is needed for this family. Import PLAINLY (no layer(...)) — this file
+   manages its own layering:
+
+   Layering of the CHAT dress is deliberate and load-bearing (the same
+   doctrine as controls-overlay.css). digichat's old ui/* wrappers ran
+   every class through cn() = tailwind-merge, so a call-site utility
+   (p-8, text-[9px], h-6 …) deterministically replaced the base dress's
+   conflicting plain utility, while variant-ed base utilities (hover:,
+   focus-visible:, disabled:, aria-*, data-*, has-*) compiled to ≥(0,2,0)
+   specificity and kept beating plain call-site utilities. Reproducing
+   that split without tailwind-merge:
+   - single-class DEFAULT rules (idle dress, sizes, part defaults) sit in
+     `@layer components`, where the app's `utilities` layer wins — the
+     call-site-override semantic;
+   - STATE / STRUCTURAL rules (pseudo-classes, [aria-*], [data-size],
+     [data-theme=dark], :has(...), descendant sizing) stay UNLAYERED so
+     they keep beating plain call-site utilities, exactly like their
+     ≥(0,2,0) compiled ancestors did.
+   The REFERENCE dress rules stay unlayered verbatim — they are
+   value-for-value specimen copies and no consumer composes Tailwind
+   utility overrides onto them.
+   ========================================================================== */
+
+/* ── Button — reference dress (reference/app/globals.css .btn-*) ────────── */
+
+.ctl-btn-ref {
+  /* component tokens — the reference dress's local geometry */
+  --ctl-btn-ref-font: 0.78rem;
+  --ctl-btn-ref-pad-block: 0.62rem;
+  --ctl-btn-ref-pad-inline: 1.3rem;
+  --ctl-btn-ref-quiet-pad: 0.2rem;
+
+  font-family: var(--font-mono);
+  font-size: var(--ctl-btn-ref-font);
+  letter-spacing: 0.02em;
+  border-radius: 0;
+  padding: var(--ctl-btn-ref-pad-block) var(--ctl-btn-ref-pad-inline);
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.ctl-btn-ref--primary {
+  /* Utilitarian v0.1: loud = ink/paper fill; accent = focus/live only. */
+  background: var(--ink);
+  color: var(--bg);
+  border-color: var(--ink);
+}
+
+.ctl-btn-ref--primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ctl-btn-ref--ghost {
+  background: transparent;
+  color: var(--ink);
+  border-color: var(--hair);
+}
+
+.ctl-btn-ref--ghost:hover {
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--hair));
+}
+
+.ctl-btn-ref--quiet {
+  background: transparent;
+  color: var(--ink-mute);
+  border-color: transparent;
+  padding-inline-start: var(--ctl-btn-ref-quiet-pad);
+  padding-inline-end: var(--ctl-btn-ref-quiet-pad);
+}
+
+.ctl-btn-ref--quiet:hover {
+  color: var(--ink);
+}
+
+.ctl-btn-ref--danger {
+  background: transparent;
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 40%, var(--hair));
+}
+
+.ctl-btn-ref--danger:hover {
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
+}
+
+/* the borderless glyph button — the nav-shell tail-cluster grammar
+   (styles/nav-shell.css .btn-icon): no fill, no border, ink-mute → ink */
+.ctl-btn-ref--icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--ink-mute);
+  transition: color 0.2s var(--ease);
+}
+
+.ctl-btn-ref--icon:hover {
+  color: var(--ink);
+  background: transparent;
+}
+
+.ctl-btn-ref--icon svg {
+  display: block;
+}
+
+/* loading state — .btn-loading / .btn-spinner grammar */
+.ctl-btn-ref--loading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ctl-btn-spinner {
+  --ctl-btn-spinner: 11px;
+
+  width: var(--ctl-btn-spinner);
+  height: var(--ctl-btn-spinner);
+  border-radius: 999px;
+  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: currentColor;
+  animation: ctl-btn-spin 0.7s linear infinite;
+}
+
+@keyframes ctl-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Button — chat dress (digichat ui/button.tsx, utility-for-utility) ────
+      defaults in @layer components (call-site utilities win, the cn()
+      semantic); states/structural rules unlayered (they beat plain
+      call-site utilities, as their ≥(0,2,0) compiled ancestors did) ─────── */
+
+@layer components {
+  .ctl-btn-chat {
+    /* component tokens — chat-dress button geometry */
+    --ctl-btn-font: 0.875rem;
+    --ctl-btn-font-sm: 0.8rem;
+    --ctl-btn-gap: 0.375rem;
+    --ctl-btn-pad-inline: 0.625rem;
+    --ctl-btn-pad-tight: 0.5rem;
+    --ctl-btn-pad-lg: 0.75rem;
+    --ctl-btn-icon: 1rem;
+    --ctl-btn-icon-xs: 0.75rem;
+    --ctl-btn-icon-sm: 0.875rem;
+    --ctl-btn-h-sm: 1.75rem;
+    --ctl-btn-h-lg: 2.25rem;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+    border: 1px solid transparent;
+    background-clip: padding-box;
+    font-size: var(--ctl-btn-font);
+    line-height: calc(1.25 / 0.875);
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    outline: none;
+    user-select: none;
+  }
+
+  /* variants — hovers sit under (hover: hover) further down, exactly as
+     Tailwind v4 emits digichat's hover: utilities */
+  .ctl-btn-chat--default {
+    /* Utilitarian v0.1: loud fill is ink/paper; accent stays for focus/live. */
+    background: var(--ink);
+    color: var(--bg);
+  }
+
+  .ctl-btn-chat--outline {
+    border-color: var(--border, var(--hair));
+    background: var(--background, var(--bg));
+  }
+
+  .ctl-btn-chat--secondary {
+    background: var(--secondary, var(--surface-2));
+    color: var(--secondary-foreground, var(--ink));
+  }
+
+  .ctl-btn-chat--destructive {
+    background: color-mix(in oklab, var(--danger) 10%, transparent);
+    color: var(--danger);
+  }
+
+  .ctl-btn-chat--link {
+    color: var(--primary, var(--accent));
+    text-underline-offset: 4px;
+  }
+}
+
+.ctl-btn-chat:focus-visible {
+  outline: none;
+  border-color: var(--ring, var(--accent));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring, var(--accent)) 50%, transparent);
+}
+
+.ctl-btn-chat:active {
+  transform: translateY(1px);
+}
+
+.ctl-btn-chat:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.ctl-btn-chat[aria-invalid="true"] {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-btn-chat[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--danger) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}
+
+.ctl-btn-chat svg {
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.ctl-btn-chat svg:not([class*="size-"]) {
+  width: var(--ctl-btn-icon);
+  height: var(--ctl-btn-icon);
+}
+
+.ctl-btn-chat--outline[aria-expanded="true"] {
+  background: var(--muted, var(--surface-2));
+  color: var(--foreground, var(--ink));
+}
+
+[data-theme="dark"] .ctl-btn-chat--outline {
+  border-color: var(--input, var(--hair));
+  background: color-mix(in oklab, var(--input, var(--hair)) 30%, transparent);
+}
+
+.ctl-btn-chat--secondary[aria-expanded="true"] {
+  background: var(--secondary, var(--surface-2));
+  color: var(--secondary-foreground, var(--ink));
+}
+
+.ctl-btn-chat--ghost[aria-expanded="true"] {
+  background: var(--muted, var(--surface-2));
+  color: var(--foreground, var(--ink));
+}
+
+.ctl-btn-chat--destructive:focus-visible {
+  border-color: color-mix(in oklab, var(--danger) 40%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-btn-chat--destructive {
+  background: color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-btn-chat--destructive:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}
+
+@media (hover: hover) {
+  a.ctl-btn-chat--default:hover {
+    background: color-mix(in oklab, var(--ink) 80%, transparent);
+  }
+
+  .ctl-btn-chat--outline:hover {
+    background: var(--muted, var(--surface-2));
+    color: var(--foreground, var(--ink));
+  }
+
+  [data-theme="dark"] .ctl-btn-chat--outline:hover {
+    background: color-mix(in oklab, var(--input, var(--hair)) 50%, transparent);
+  }
+
+  .ctl-btn-chat--secondary:hover {
+    background: color-mix(in oklab, var(--secondary, var(--surface-2)) 80%, transparent);
+  }
+
+  .ctl-btn-chat--ghost:hover {
+    background: var(--muted, var(--surface-2));
+    color: var(--foreground, var(--ink));
+  }
+
+  [data-theme="dark"] .ctl-btn-chat--ghost:hover {
+    background: color-mix(in oklab, var(--muted, var(--surface-2)) 50%, transparent);
+  }
+
+  .ctl-btn-chat--destructive:hover {
+    background: color-mix(in oklab, var(--danger) 20%, transparent);
+  }
+
+  [data-theme="dark"] .ctl-btn-chat--destructive:hover {
+    background: color-mix(in oklab, var(--danger) 30%, transparent);
+  }
+
+  .ctl-btn-chat--link:hover {
+    text-decoration-line: underline;
+  }
+}
+
+/* sizes — plain size dress in @layer components; icon-slot padding (:has)
+   and unsized-svg rules stay unlayered */
+@layer components {
+  .ctl-btn-chat--size-default {
+    height: var(--space-5);
+    gap: var(--ctl-btn-gap);
+    padding-inline: var(--ctl-btn-pad-inline);
+  }
+
+  .ctl-btn-chat--size-xs {
+    height: var(--space-4);
+    gap: var(--space-1);
+    border-radius: 0;
+    padding-inline: var(--ctl-btn-pad-tight);
+    font-size: var(--type-meta);
+    line-height: calc(1 / 0.75);
+  }
+
+  .ctl-btn-chat--size-sm {
+    height: var(--ctl-btn-h-sm);
+    gap: var(--space-1);
+    border-radius: 0;
+    padding-inline: var(--ctl-btn-pad-inline);
+    font-size: var(--ctl-btn-font-sm);
+  }
+
+  .ctl-btn-chat--size-lg {
+    height: var(--ctl-btn-h-lg);
+    gap: var(--ctl-btn-gap);
+    padding-inline: var(--ctl-btn-pad-inline);
+  }
+
+  .ctl-btn-chat--size-icon {
+    width: var(--space-5);
+    height: var(--space-5);
+  }
+
+  .ctl-btn-chat--size-icon-xs {
+    width: var(--space-4);
+    height: var(--space-4);
+    border-radius: 0;
+  }
+
+  .ctl-btn-chat--size-icon-sm {
+    width: var(--ctl-btn-h-sm);
+    height: var(--ctl-btn-h-sm);
+    border-radius: 0;
+  }
+
+  .ctl-btn-chat--size-icon-lg {
+    width: var(--ctl-btn-h-lg);
+    height: var(--ctl-btn-h-lg);
+  }
+}
+
+.ctl-btn-chat--size-default:has([data-icon="inline-end"]) {
+  padding-inline-end: var(--ctl-btn-pad-tight);
+}
+
+.ctl-btn-chat--size-default:has([data-icon="inline-start"]) {
+  padding-inline-start: var(--ctl-btn-pad-tight);
+}
+
+.ctl-btn-chat--size-xs:has([data-icon="inline-end"]) {
+  padding-inline-end: var(--ctl-btn-gap);
+}
+
+.ctl-btn-chat--size-xs:has([data-icon="inline-start"]) {
+  padding-inline-start: var(--ctl-btn-gap);
+}
+
+.ctl-btn-chat--size-xs svg:not([class*="size-"]) {
+  width: var(--ctl-btn-icon-xs);
+  height: var(--ctl-btn-icon-xs);
+}
+
+.ctl-btn-chat--size-sm:has([data-icon="inline-end"]) {
+  padding-inline-end: var(--ctl-btn-gap);
+}
+
+.ctl-btn-chat--size-sm:has([data-icon="inline-start"]) {
+  padding-inline-start: var(--ctl-btn-gap);
+}
+
+.ctl-btn-chat--size-sm svg:not([class*="size-"]) {
+  width: var(--ctl-btn-icon-sm);
+  height: var(--ctl-btn-icon-sm);
+}
+
+.ctl-btn-chat--size-lg:has([data-icon="inline-end"]) {
+  padding-inline-end: var(--ctl-btn-pad-lg);
+}
+
+.ctl-btn-chat--size-lg:has([data-icon="inline-start"]) {
+  padding-inline-start: var(--ctl-btn-pad-lg);
+}
+
+.ctl-btn-chat--size-icon-xs svg:not([class*="size-"]) {
+  width: var(--ctl-btn-icon-xs);
+  height: var(--ctl-btn-icon-xs);
+}
+
+/* inside a button group the compact radii return to the group's lg radius */
+[data-slot="button-group"] .ctl-btn-chat--size-xs,
+[data-slot="button-group"] .ctl-btn-chat--size-sm,
+[data-slot="button-group"] .ctl-btn-chat--size-icon-xs,
+[data-slot="button-group"] .ctl-btn-chat--size-icon-sm {
+  border-radius: 0;
+}
+
+/* ── Badge — chat dress (digichat ui/badge.tsx) — defaults in
+      @layer components, states/structural rules unlayered (see header) ──── */
+
+@layer components {
+  .ctl-badge-chat {
+    /* component tokens — chat-dress badge geometry */
+    --ctl-badge-h: 1.25rem;
+    --ctl-badge-pad-block: 0.125rem;
+    --ctl-badge-pad-inline: 0.5rem;
+    --ctl-badge-pad-tight: 0.375rem;
+    --ctl-badge-icon: 0.75rem;
+
+    display: inline-flex;
+    height: var(--ctl-badge-h);
+    width: fit-content;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+    overflow: hidden;
+    border-radius: 0;
+    border: 1px solid transparent;
+    padding: var(--ctl-badge-pad-block) var(--ctl-badge-pad-inline);
+    font-size: var(--type-meta);
+    line-height: calc(1 / 0.75);
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .ctl-badge-chat--default {
+    background: var(--primary, var(--accent));
+    color: var(--primary-foreground, var(--on-accent));
+  }
+
+  .ctl-badge-chat--secondary {
+    background: var(--secondary, var(--surface-2));
+    color: var(--secondary-foreground, var(--ink));
+  }
+
+  .ctl-badge-chat--destructive {
+    background: color-mix(in oklab, var(--danger) 10%, transparent);
+    color: var(--danger);
+  }
+
+  .ctl-badge-chat--outline {
+    border-color: var(--border, var(--hair));
+    color: var(--foreground, var(--ink));
+  }
+
+  .ctl-badge-chat--link {
+    color: var(--primary, var(--accent));
+    text-underline-offset: 4px;
+  }
+}
+
+.ctl-badge-chat:focus-visible {
+  border-color: var(--ring, var(--accent));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring, var(--accent)) 50%, transparent);
+}
+
+.ctl-badge-chat:has([data-icon="inline-end"]) {
+  padding-inline-end: var(--ctl-badge-pad-tight);
+}
+
+.ctl-badge-chat:has([data-icon="inline-start"]) {
+  padding-inline-start: var(--ctl-badge-pad-tight);
+}
+
+.ctl-badge-chat[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+
+.ctl-badge-chat[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-badge-chat[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}
+
+.ctl-badge-chat > svg {
+  pointer-events: none;
+  width: var(--ctl-badge-icon) !important;
+  height: var(--ctl-badge-icon) !important;
+}
+
+.ctl-badge-chat--destructive:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-badge-chat--destructive {
+  background: color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-badge-chat--destructive:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}
+
+@media (hover: hover) {
+  a.ctl-badge-chat--default:hover {
+    background: color-mix(in oklab, var(--primary, var(--accent)) 80%, transparent);
+  }
+
+  a.ctl-badge-chat--secondary:hover {
+    background: color-mix(in oklab, var(--secondary, var(--surface-2)) 80%, transparent);
+  }
+
+  a.ctl-badge-chat--destructive:hover {
+    background: color-mix(in oklab, var(--danger) 20%, transparent);
+  }
+
+  a.ctl-badge-chat--outline:hover {
+    background: var(--muted, var(--surface-2));
+    color: var(--muted-foreground, var(--ink-soft));
+  }
+
+  .ctl-badge-chat--ghost:hover {
+    background: var(--muted, var(--surface-2));
+    color: var(--muted-foreground, var(--ink-soft));
+  }
+
+  [data-theme="dark"] .ctl-badge-chat--ghost:hover {
+    background: color-mix(in oklab, var(--muted, var(--surface-2)) 50%, transparent);
+  }
+
+  .ctl-badge-chat--link:hover {
+    text-decoration-line: underline;
+  }
+}
+
+/* ── Card — chat dress (digichat ui/card.tsx) — defaults (root + part
+      dress) in @layer components; :has()/data-size/structural rules
+      unlayered (see header) ───────────────────────────────────────────── */
+
+@layer components {
+  .ctl-card-chat {
+    /* component tokens — chat-dress card geometry */
+    --ctl-card-gap: 1rem;
+    --ctl-card-pad: 1rem;
+    --ctl-card-pad-sm: 0.75rem;
+    --ctl-card-font: 0.875rem;
+    --ctl-card-title-font: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--ctl-card-gap);
+    overflow: hidden;
+    border-radius: 0;
+    background: var(--card, var(--surface));
+    padding-block: var(--ctl-card-pad);
+    font-size: var(--ctl-card-font);
+    line-height: calc(1.25 / 0.875);
+    color: var(--card-foreground, var(--ink));
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground, var(--ink)) 10%, transparent);
+  }
+
+  .ctl-card-chat .ctl-card-header {
+    container: card-header / inline-size;
+    display: grid;
+    grid-auto-rows: min-content;
+    align-items: start;
+    gap: var(--space-1);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    padding-inline: var(--ctl-card-pad);
+  }
+
+  .ctl-card-chat .ctl-card-title {
+    font-family: var(--font-heading, var(--font-sans));
+    font-size: var(--ctl-card-title-font);
+    line-height: 1.375;
+    font-weight: 500;
+  }
+
+  .ctl-card-chat .ctl-card-description {
+    font-size: var(--ctl-card-font);
+    line-height: calc(1.25 / 0.875);
+    color: var(--muted-foreground, var(--ink-soft));
+  }
+
+  .ctl-card-chat .ctl-card-content {
+    padding-inline: var(--ctl-card-pad);
+  }
+
+  .ctl-card-chat .ctl-card-footer {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid var(--border, var(--hair));
+    background: color-mix(in oklab, var(--muted, var(--surface-2)) 50%, transparent);
+    padding: var(--ctl-card-pad);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* the action slot places itself the same way under both dresses */
+  .ctl-card-action {
+    grid-column-start: 2;
+    grid-row: 1 / span 2;
+    align-self: start;
+    justify-self: end;
+  }
+}
+
+.ctl-card-chat:has([data-slot="card-footer"]) {
+  padding-bottom: 0;
+}
+
+.ctl-card-chat:has(> img:first-child) {
+  padding-top: 0;
+}
+
+.ctl-card-chat[data-size="sm"] {
+  gap: var(--ctl-card-pad-sm);
+  padding-block: var(--ctl-card-pad-sm);
+}
+
+.ctl-card-chat[data-size="sm"]:has([data-slot="card-footer"]) {
+  padding-bottom: 0;
+}
+
+.ctl-card-chat > img:first-child {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.ctl-card-chat > img:last-child {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.ctl-card-chat .ctl-card-header:has([data-slot="card-action"]) {
+  grid-template-columns: 1fr auto;
+}
+
+.ctl-card-chat .ctl-card-header:has([data-slot="card-description"]) {
+  grid-template-rows: auto auto;
+}
+
+/* digichat's `[.border-b]:pb-4` — a header the consumer marked .border-b */
+.ctl-card-chat .ctl-card-header.border-b {
+  padding-bottom: var(--ctl-card-pad);
+}
+
+.ctl-card-chat[data-size="sm"] .ctl-card-header {
+  padding-inline: var(--ctl-card-pad-sm);
+}
+
+.ctl-card-chat[data-size="sm"] .ctl-card-header.border-b {
+  padding-bottom: var(--ctl-card-pad-sm);
+}
+
+.ctl-card-chat[data-size="sm"] .ctl-card-title {
+  font-size: var(--ctl-card-font);
+}
+
+.ctl-card-chat[data-size="sm"] .ctl-card-content {
+  padding-inline: var(--ctl-card-pad-sm);
+}
+
+.ctl-card-chat[data-size="sm"] .ctl-card-footer {
+  padding: var(--ctl-card-pad-sm);
+}
+
+/* ── Input — chat dress (digichat ui/input.tsx) — defaults in
+      @layer components, states unlayered (see header) ────────────────────── */
+
+@layer components {
+  .ctl-input-chat {
+    /* component tokens — chat-dress input geometry */
+    --ctl-input-h: 2rem;
+    --ctl-input-pad-block: 0.25rem;
+    --ctl-input-pad-inline: 0.625rem;
+    --ctl-input-font: 1rem;
+    --ctl-input-font-md: 0.875rem;
+    --ctl-input-file-h: 1.5rem;
+
+    height: var(--ctl-input-h);
+    width: 100%;
+    min-width: 0;
+    border-radius: 0;
+    border: 1px solid var(--input, var(--hair));
+    background: transparent;
+    padding: var(--ctl-input-pad-block) var(--ctl-input-pad-inline);
+    font-size: var(--ctl-input-font);
+    line-height: 1.5;
+    outline: none;
+    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @media (min-width: 48rem) {
+    .ctl-input-chat {
+      font-size: var(--ctl-input-font-md);
+      line-height: calc(1.25 / 0.875);
+    }
+  }
+
+  .ctl-input-chat::file-selector-button {
+    display: inline-flex;
+    height: var(--ctl-input-file-h);
+    border: 0;
+    background: transparent;
+    font-size: var(--ctl-input-font-md);
+    line-height: calc(1.25 / 0.875);
+    font-weight: 500;
+    color: var(--foreground, var(--ink));
+  }
+
+  .ctl-input-chat::placeholder {
+    color: var(--muted-foreground, var(--ink-soft));
+  }
+}
+
+.ctl-input-chat:focus-visible {
+  outline: none;
+  border-color: var(--ring, var(--accent));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring, var(--accent)) 50%, transparent);
+}
+
+.ctl-input-chat:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  background: color-mix(in oklab, var(--input, var(--hair)) 50%, transparent);
+  opacity: 0.5;
+}
+
+.ctl-input-chat[aria-invalid="true"] {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent);
+}
+
+[data-theme="dark"] .ctl-input-chat {
+  background: color-mix(in oklab, var(--input, var(--hair)) 30%, transparent);
+}
+
+[data-theme="dark"] .ctl-input-chat:disabled {
+  background: color-mix(in oklab, var(--input, var(--hair)) 80%, transparent);
+}
+
+[data-theme="dark"] .ctl-input-chat[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--danger) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}
+
+/* ── Label — reference dress (the form-fields mono micro-caps grammar) ──── */
+
+.ctl-label-ref {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--ink-mute);
+}
+
+/* ── Label — chat dress (digichat ui/label.tsx) — default in
+      @layer components, group/peer dimming unlayered (see header) ─────────── */
+
+@layer components {
+  .ctl-label-chat {
+    --ctl-label-font: 0.875rem;
+
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--ctl-label-font);
+    line-height: 1;
+    font-weight: 500;
+    user-select: none;
+  }
+}
+
+.group[data-disabled="true"] .ctl-label-chat {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.peer:disabled ~ .ctl-label-chat {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ── Skeleton — the sk-* shimmer grammar (#1548, from
+      reference/app/controls/controls.css). Shape defaults in
+      @layer components so call-site width/height utilities can size them
+      (dashboard's snapshot skeleton uses h-20 blocks); the ::after shimmer,
+      keyframes, and reduced-motion guard stay unlayered ─────────────────── */
+
+@layer components {
+  .sk {
+    position: relative;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--ink) 9%, transparent);
+    border-radius: 0;
+  }
+
+  .sk-circle {
+    --sk-circle: 40px;
+
+    width: var(--sk-circle);
+    height: var(--sk-circle);
+    border-radius: 999px;
+    flex-shrink: 0;
+  }
+
+  .sk-line {
+    --sk-line-h: 0.72rem;
+
+    height: var(--sk-line-h);
+  }
+
+  .sk-line--sm {
+    height: var(--space-2);
+  }
+
+  .sk-btn {
+    --sk-btn-w: 6.6rem;
+    --sk-btn-h: 2rem;
+
+    width: var(--sk-btn-w);
+    height: var(--sk-btn-h);
+    border-radius: 0;
+    flex-shrink: 0;
+  }
+
+  .sk-block {
+    height: var(--space-4);
+    width: 60%;
+    border-radius: 0;
+  }
+}
+
+.sk::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--ink) 13%, transparent),
+    transparent
+  );
+  animation: sk-shimmer 1.5s var(--ease) infinite;
+}
+
+@keyframes sk-shimmer {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* ── EmptyState — the no-results / first-run / error triple (#1548). The
+      specimen wore token utilities (empty-states-reference.tsx); translated
+      value-for-value here (the /NN washes as the color-mix(in oklab, …)
+      Tailwind v4 emits). Defaults in @layer components; the error-variant
+      glyph tint is a structural (descendant) rule and stays unlayered ───── */
+
+@layer components {
+  .ctl-empty {
+    /* component tokens — empty-state geometry */
+    --ctl-empty-gap: 0.55rem;
+    --ctl-empty-pad-block: 1.8rem;
+    --ctl-empty-pad-inline: 1.3rem;
+    --ctl-empty-glyph: 2.75rem;
+    --ctl-empty-title-font: 0.86rem;
+    --ctl-empty-body-font: 0.8rem;
+    --ctl-empty-note-font: 0.75rem;
+    --ctl-empty-font-md: 0.875rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ctl-empty-gap);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: color-mix(in oklab, var(--surface) 55%, transparent);
+    padding: var(--ctl-empty-pad-block) var(--ctl-empty-pad-inline);
+    text-align: center;
+  }
+
+  .ctl-empty-glyph {
+    display: grid;
+    place-items: center;
+    width: var(--ctl-empty-glyph);
+    height: var(--ctl-empty-glyph);
+    margin-bottom: 0.15rem;
+    border-radius: 0;
+    background: color-mix(in oklab, var(--ink) 8%, transparent);
+    color: var(--ink-mute);
+  }
+
+  .ctl-empty-title {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: var(--ctl-empty-title-font);
+    font-weight: 400;
+    color: var(--ink);
+  }
+
+  .ctl-empty-body {
+    margin: 0 0 0.4rem;
+    max-width: 24ch;
+    font-size: var(--ctl-empty-body-font);
+    line-height: 1.5;
+    color: var(--ink-mute);
+  }
+
+  /* note — the italic "why it's empty" secondary line (dashboard observability) */
+  .ctl-empty-note {
+    margin: 0;
+    max-width: 24ch;
+    font-size: var(--ctl-empty-note-font);
+    font-style: italic;
+    line-height: calc(1 / 0.75);
+    color: color-mix(in oklab, var(--ink-mute) 60%, transparent);
+  }
+}
+
+.ctl-empty--error .ctl-empty-glyph {
+  background: color-mix(in oklab, var(--danger) 12%, transparent);
+  color: var(--danger);
+}
+
+/* ── EmptyState glass dresses (#1548 dashboard adoption) — the app's shipped
+      looks, value-for-value from components/observability/shared.tsx and
+      components/db-unavailable.tsx. Type/spacing only: the surface stays the
+      call-site class (dashboard `.glass-card`, unlayered app CSS, so it wins
+      the card chrome AND keeps the app's motion-reveal hook). No state rules
+      here, so everything sits in @layer components — call-site utilities may
+      still adjust geometry (e.g. db-unavailable's `max-w-md mx-auto`). ────── */
+
+@layer components {
+  /* dress="glass" — the observability quiet card (glass-card p-8 gap-2) */
+  .ctl-empty--glass {
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-5);
+  }
+
+  .ctl-empty--glass .ctl-empty-title {
+    font-family: var(--font-sans);
+    font-size: var(--ctl-empty-font-md);
+    line-height: calc(1.25 / 0.875);
+    font-weight: 500;
+    color: var(--ink-soft);
+  }
+
+  .ctl-empty--glass .ctl-empty-body {
+    margin: 0;
+    max-width: 28rem; /* max-w-md */
+    font-size: var(--type-meta);
+    line-height: calc(1 / 0.75);
+    color: var(--ink-mute);
+  }
+
+  .ctl-empty--glass .ctl-empty-note {
+    margin-top: var(--space-1);
+    max-width: 28rem;
+  }
+
+  /* dress="glass-display" — the full-page gate card (db-unavailable):
+     font-display 2xl title, relaxed text-sm body, margin-driven rhythm */
+  .ctl-empty--glass-display {
+    --ctl-empty-display-title: 1.5rem;
+
+    justify-content: center;
+    gap: 0;
+    padding: var(--space-5) var(--space-4);
+  }
+
+  .ctl-empty--glass-display .ctl-empty-title {
+    font-family: var(--font-display);
+    font-size: var(--ctl-empty-display-title);
+    line-height: calc(2 / 1.5);
+    letter-spacing: -0.025em; /* tracking-tight */
+    font-weight: 400;
+    color: var(--ink);
+  }
+
+  .ctl-empty--glass-display .ctl-empty-body {
+    margin: var(--space-2) 0 0;
+    max-width: none;
+    font-size: var(--ctl-empty-font-md);
+    line-height: 1.625; /* leading-relaxed */
+    color: var(--ink-mute);
+  }
+}
+
+/* ── NavButtons — segmented switch, pager, icon buttons (#1548, from
+      reference/app/controls/controls.css). Defaults in @layer components;
+      hover/disabled and the aria-pressed / aria-current selection states
+      (replacing the specimen's .on classes) stay unlayered. Order matters:
+      the aria selection rules sit after :hover at equal specificity, so a
+      hovered selected cell keeps the selected dress, as in the specimen ── */
+
+@layer components {
+  .nb-seg-group {
+    display: inline-flex;
+    overflow: hidden;
+    border: 1px solid var(--hair);
+    border-radius: 0;
+  }
+
+  .nb-seg {
+    /* component tokens — segmented-switch cell geometry */
+    --nb-seg-pad-block: 0.4rem;
+    --nb-seg-pad-inline: 0.85rem;
+    --nb-seg-font: 0.72rem;
+
+    padding: var(--nb-seg-pad-block) var(--nb-seg-pad-inline);
+    border: none;
+    border-inline-start: 1px solid var(--hair);
+    background: var(--surface);
+    color: var(--ink-mute);
+    font-family: var(--font-mono);
+    font-size: var(--nb-seg-font);
+    cursor: pointer;
+    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
+  }
+
+  .nb-pager {
+    --nb-pager-gap: 0.3rem;
+
+    display: inline-grid;
+    grid-template-columns: auto minmax(0, max-content) auto;
+    align-items: center;
+    gap: var(--nb-pager-gap);
+  }
+
+  .nb-pager-middle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .nb-page,
+  .nb-page-edge {
+    --nb-page-pad-inline: 0.6rem;
+    --nb-page-font: 0.72rem;
+
+    min-width: var(--space-5);
+    height: var(--space-5);
+    padding: 0 var(--nb-page-pad-inline);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    color: var(--ink-soft);
+    font-family: var(--font-mono);
+    font-size: var(--nb-page-font);
+    cursor: pointer;
+    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
+  }
+
+  .nb-icon {
+    --nb-icon-size: var(--space-5);
+
+    width: var(--nb-icon-size);
+    height: var(--nb-icon-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-mute);
+    cursor: pointer;
+    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
+  }
+
+  /* Disabled is inert but still names the affordance: no click affordance,
+     not-allowed cursor (mirrors the kit Button's disabled convention). */
+  .nb-icon:disabled {
+    cursor: not-allowed;
+  }
+
+  .nb-seg:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.nb-seg:first-child {
+  border-inline-start: none;
+}
+
+.nb-seg:hover {
+  color: var(--ink-soft);
+}
+
+.nb-seg[aria-pressed="true"] {
+  color: var(--ink);
+  background: var(--accent-weak);
+}
+
+.nb-page:hover:not([aria-current="page"]),
+.nb-page-edge:hover:not(:disabled) {
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
+}
+
+.nb-page[aria-current="page"] {
+  color: var(--on-accent);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.nb-page-edge:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.nb-icon:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+}
+
+/* ── NavButtons dresses (#1548) — dashboard's shipped looks, translated
+      exactly from its Tailwind utilities. Defaults in @layer components;
+      state overrides unlayered AFTER the reference state rules so they win
+      the tie at higher specificity. color-mix(in oklab, …) matches Tailwind
+      v4's opacity-modifier compilation (bg-accent/20, hover:bg-ink/[0.04]).
+
+      - .nb-pager--capsule (Pager dress="capsule"): one bordered term-bg
+        capsule (9px radius, mono 12.5px tabular) with borderless chevron
+        edges pinned in auto columns — dashboard DatePager / pipeline + briefs.
+      - .nb-pager--date .nb-pager-date: fixed-width centered label slot
+        sized for the longest en-US short format ("Wed, Sep 30, 2026").
+      - .nb-seg-group--accent (SegmentedControl dress="accent"): sans
+        font-medium cells on a transparent track, accent/20 wash + accent
+        text on the selection — dashboard PerformanceDateRange. ─────────── */
+
+@layer components {
+  .nb-pager--capsule {
+    /* shipped capsule: gap-2 px-2.5 py-1.5 border-hair rounded-[9px]
+       bg-term-bg font-mono text-[12.5px] tabular-nums; grid keeps edges
+       fixed while the middle label width changes across dates */
+    --nb-capsule-pad-block: 0.375rem;
+    --nb-capsule-pad-inline: 0.625rem;
+    --nb-capsule-font: 12.5px;
+
+    grid-template-columns: auto 1fr auto;
+    gap: var(--space-2);
+    padding: var(--nb-capsule-pad-block) var(--nb-capsule-pad-inline);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--term-bg);
+    font-family: var(--font-mono);
+    font-size: var(--nb-capsule-font);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nb-pager--capsule .nb-page-edge {
+    /* shipped chevrons: borderless, transparent, content-sized */
+    min-width: 0;
+    height: auto;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-mute);
+    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .nb-pager--capsule .nb-page-edge:hover:not(:disabled) {
+    color: var(--ink);
+    border-color: transparent;
+  }
+
+  /* Date capsule: middle column sized for longest short weekday label so
+     arrows never shift when the string grows/shrinks. */
+  .nb-pager--date {
+    --nb-date-ch: 17ch;
+
+    min-width: calc(var(--space-4) + var(--nb-date-ch) + var(--space-4));
+  }
+
+  .nb-pager--date .nb-pager-middle {
+    min-width: var(--nb-date-ch);
+  }
+
+  .nb-pager-date {
+    --nb-date-ch: 17ch;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: var(--nb-date-ch);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .nb-pager-date:hover:not(:disabled),
+  .nb-pager-date[data-popup-open] {
+    color: var(--accent);
+    background: color-mix(in oklab, var(--accent) 12%, transparent);
+  }
+
+  .nb-pager-date:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .nb-pager-date-text {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .nb-seg-group--accent .nb-seg {
+    /* shipped cells: px-3 py-1.5 sans text-xs font-medium, no fill */
+    --nb-seg-accent-pad-block: 0.375rem;
+    --nb-seg-accent-pad-inline: 0.75rem;
+
+    padding: var(--nb-seg-accent-pad-block) var(--nb-seg-accent-pad-inline);
+    background: transparent;
+    color: var(--ink-mute);
+    font-family: var(--font-sans);
+    font-size: var(--type-meta);
+    font-weight: 500;
+    transition:
+      color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.nb-pager--capsule .nb-page-edge:disabled {
+  /* shipped: disabled:opacity-30; cursor normalized to the kit's not-allowed
+     convention (#4306, phase 0.3) */
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.nb-seg-group--accent .nb-seg:hover:not([aria-pressed="true"]) {
+  /* shipped: hover:bg-ink/[0.04] hover:text-ink (unselected only) */
+  color: var(--ink);
+  background: color-mix(in oklab, var(--ink) 4%, transparent);
+}
+
+.nb-seg-group--accent .nb-seg[aria-pressed="true"] {
+  /* shipped selection: bg-accent/20 text-accent (hover leaves it alone) */
+  color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 20%, transparent);
+}
+
+/* ── TagsInput — chips multi-select (#1548, from
+      reference/app/controls/controls.css; the specimen's baked-in
+      margin-top moved to the consumer). Defaults in @layer components;
+      focus-within, hovers, and the chipless-input stretch (structural
+      :first-child) stay unlayered ─────────────────────────────────────── */
+
+@layer components {
+  .tg-field {
+    /* component tokens — tags-field geometry */
+    --tg-gap: 0.4rem;
+    --tg-pad-block: 0.5rem;
+    --tg-pad-inline: 0.6rem;
+
+    width: min(100%, 30rem);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--tg-gap);
+    padding: var(--tg-pad-block) var(--tg-pad-inline);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    cursor: text;
+    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
+  }
+
+  .tg-chip {
+    /* chip tokens are declared on the chip itself: `.tg-chip` is rendered
+       standalone (no `.tg-field` ancestor requirement) */
+    --tg-chip-gap: 0.35rem;
+    --tg-chip-pad-block: 0.22rem;
+    --tg-chip-pad-inline: 0.35rem;
+    --tg-chip-pad-lead: 0.6rem;
+    --tg-chip-font: 0.74rem;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tg-chip-gap);
+    padding: var(--tg-chip-pad-block) var(--tg-chip-pad-inline) var(--tg-chip-pad-block) var(--tg-chip-pad-lead);
+    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--hair));
+    border-radius: 0;
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    font-family: var(--font-mono);
+    font-size: var(--tg-chip-font);
+    color: var(--ink);
+    white-space: nowrap;
+  }
+
+  .tg-x {
+    --tg-x-pad: 0.1rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--tg-x-pad);
+    border: none;
+    background: transparent;
+    color: var(--ink-mute);
+    cursor: pointer;
+    border-radius: 0;
+    transition: color 0.15s var(--ease);
+  }
+
+  .tg-input {
+    --tg-input-min-w: 7rem;
+    --tg-input-pad: 0.2rem;
+    --tg-input-font: 0.8rem;
+
+    min-width: var(--tg-input-min-w);
+    border: none;
+    background: transparent;
+    padding: var(--tg-input-pad);
+    font-family: var(--font-mono);
+    font-size: var(--tg-input-font);
+    color: var(--ink);
+    outline: none;
+  }
+
+  .tg-input::placeholder {
+    color: var(--ink-mute);
+  }
+
+  .tg-suggest-row {
+    --tg-suggest-gap: 0.4rem;
+
+    margin-top: 0.7rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--tg-suggest-gap);
+  }
+
+  .tg-suggest-label {
+    margin-inline-end: 0.2rem;
+    font-family: var(--font-mono);
+    font-size: 0.56rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ink-mute);
+  }
+
+  .tg-suggest-chip {
+    padding: var(--space-1) 0.6rem;
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-soft);
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    cursor: pointer;
+    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
+  }
+}
+
+.tg-field:focus-within {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+/* the input stretches to the full row only while the field is chipless
+   (the specimen's conditional flex-1: placeholder gets full width; once
+   chips exist the input sits compact after the last one) */
+.tg-field .tg-input:first-child {
+  flex: 1 1 0%;
+}
+
+.tg-x:hover {
+  color: var(--ink);
+}
+
+.tg-suggest-chip:hover {
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
+}
+
+/* quant dress (#1548 dashboard adoption — the NAV-comparables picker in
+   components/portfolio/performance-chart-workspace.tsx): a rounded-md 11px
+   accent chip, NOT the reference pill. Translated utility-for-utility from
+   the shipped chip (gap-0.5 pl-2 pr-1 py-0.5 rounded-md text-[11px]
+   font-medium border-accent/35 bg-accent/10 text-accent; × wears p-0.5
+   rounded text-ink-soft hover:text-ink hover:bg-ink/10). Same layering
+   split: single-class default in @layer components, descendant/state rules
+   unlayered. */
+@layer components {
+  .tg-chip.tg-chip-quant {
+    --tg-chip-quant-gap: 0.125rem;
+
+    gap: var(--tg-chip-quant-gap);
+    padding: var(--tg-chip-quant-gap) var(--space-1) var(--tg-chip-quant-gap) var(--space-2);
+    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+    border-radius: 0;
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--accent);
+  }
+}
+
+.tg-chip-quant .tg-x {
+  padding: var(--tg-chip-quant-gap, 0.125rem);
+  border-radius: 0;
+  color: var(--ink-soft);
+}
+
+.tg-chip-quant .tg-x:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 10%, transparent);
+}
+
+/* ── SearchBar — glyph · input · clear/hint (#1548, from
+      reference/app/controls/controls.css + the specimen's input/clear
+      utilities; the baked-in margin-top moved to the consumer). Defaults
+      in @layer components; focus-within, hover, and the UA search-cancel
+      reset stay unlayered. The reference `/` keycap hint (.sb-hint) stays
+      in the reference's controls.css — it is consumer markup, and its
+      unlayered .kbd override depends on that sheet's import order ──────── */
+
+@layer components {
+  .ctl-search {
+    /* component tokens — search-bar geometry */
+    --ctl-search-gap: 0.55rem;
+    --ctl-search-pad-block: 0.55rem;
+    --ctl-search-pad-inline: 0.7rem;
+    --ctl-search-font: 0.82rem;
+
+    width: min(100%, 26rem);
+    display: flex;
+    align-items: center;
+    gap: var(--ctl-search-gap);
+    padding: var(--ctl-search-pad-block) var(--ctl-search-pad-inline);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
+  }
+
+  .sb-glyph {
+    display: inline-flex;
+    color: var(--ink-mute);
+  }
+
+  .sb-input {
+    flex: 1 1 0%;
+    border: none;
+    background: transparent;
+    font-family: var(--font-mono);
+    font-size: var(--ctl-search-font, 0.82rem);
+    color: var(--ink);
+    outline: none;
+  }
+
+  .sb-input::placeholder {
+    color: var(--ink-mute);
+  }
+
+  .sb-clear {
+    --sb-clear-pad-block: 0.1rem;
+    --sb-clear-pad-inline: 0.2rem;
+    --sb-clear-font: 0.7rem;
+
+    padding: var(--sb-clear-pad-block) var(--sb-clear-pad-inline);
+    border: none;
+    background: transparent;
+    color: var(--ink-mute);
+    font-size: var(--sb-clear-font);
+    cursor: pointer;
+  }
+}
+
+.ctl-search:focus-within {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+/* native search UA affordance has no Tailwind utility — kept as the
+   .sb-input class's rule; the clear button replaces it */
+.sb-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.sb-clear:hover {
+  color: var(--ink);
+}
+
+/* ── Slider input — DigiWeb range mechanic (#3577)
+   Native <input type="range"> restyled like the reference specimen: 4px
+   track, accent fill supplied inline by the consumer, SQUARE thumb (sharp-
+   corner grammar — not OS accent-color pills / round knobs). Wrapped by the
+   shared <Slider/> composite (components/controls/Slider.tsx); apps may
+   also use `.ctl-slider-input` alone. */
+@layer components {
+  .ctl-slider-input {
+    /* component tokens — native range mechanic */
+    --ctl-slider-track-h: 4px;
+    --ctl-slider-thumb: 14px;
+    --ctl-slider-thumb-offset: -5px;
+
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: var(--ctl-slider-track-h);
+    border-radius: 0;
+    cursor: pointer;
+    background: color-mix(in srgb, var(--ink) 14%, transparent);
+  }
+
+  .ctl-slider-input:focus-visible {
+    outline: none;
+  }
+
+  .ctl-slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--ctl-slider-thumb);
+    height: var(--ctl-slider-thumb);
+    margin-top: var(--ctl-slider-thumb-offset);
+    border-radius: 0;
+    background: var(--accent);
+    border: 2px solid var(--surface);
+    box-shadow: 0 0 0 1px var(--hair);
+    cursor: pointer;
+  }
+
+  .ctl-slider-input:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 1px var(--hair), 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
+  }
+
+  .ctl-slider-input::-moz-range-thumb {
+    width: var(--ctl-slider-thumb);
+    height: var(--ctl-slider-thumb);
+    border-radius: 0;
+    background: var(--accent);
+    border: 2px solid var(--surface);
+    box-shadow: 0 0 0 1px var(--hair);
+    cursor: pointer;
+  }
+
+  .ctl-slider-input:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 1px var(--hair), 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
+  }
+
+  .ctl-slider-input::-moz-range-track {
+    height: var(--ctl-slider-track-h);
+    border-radius: 0;
+    background: transparent;
+  }
+}
+
+
+/* ── Field — label + control + hint/error (components/controls/Field.tsx) ─
+   The wrapper meshes the wiring (ids, aria-describedby, aria-invalid); the
+   control's own dress (shared Input's [aria-invalid] ring, native fields)
+   does the rest. Error is --danger, never --down (money colors are P&L). */
+@layer components {
+  .ctl-field {
+    --ctl-field-gap: 0.35rem;
+    --ctl-field-hint-font: 0.62rem;
+
+    display: grid;
+    gap: var(--ctl-field-gap);
+    min-width: 0;
+  }
+
+  /* Screen-reader-only (required) marker. Deliberately NOT Tailwind's
+     `.sr-only`: that utility only exists in an app whose own sources use
+     it (see .tm-sr) — shared components carry their own. */
+  .ctl-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .ctl-field-required {
+    color: var(--ink-soft);
+  }
+
+  .ctl-field-hint {
+    font-family: var(--font-mono);
+    font-size: var(--ctl-field-hint-font, 0.62rem);
+    line-height: 1.5;
+    color: var(--ink-mute);
+    margin: 0;
+  }
+
+  .ctl-field-error {
+    font-family: var(--font-mono);
+    font-size: var(--ctl-field-hint-font, 0.62rem);
+    line-height: 1.5;
+    color: var(--danger);
+    margin: 0;
+  }
+}
+
+
+/* ── Checkbox / Radio / Switch (components/controls/Selection.tsx) ───────
+   Values mirror the form-fields specimen (.ff-box / .ff-dot / .ff-toggle):
+   16px box/dot, hairline, accent check, accent focus ring. Base UI reports
+   state on data-* (buttons have no :checked); focus travels natively. */
+@layer components {
+  .ctl-check {
+    /* component tokens — selection controls (16px box/dot, 34×20 switch) */
+    --ctl-check-size: 16px;
+    --ctl-check-glyph: 0.62rem;
+
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ctl-check-size);
+    height: var(--ctl-check-size);
+    flex-shrink: 0;
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
+  }
+
+  /* the indicator mounts only when checked — the glyph lives in ::after */
+  .ctl-check-indicator::after {
+    content: "✓";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--ctl-check-glyph, 0.62rem);
+    line-height: 1;
+    color: var(--on-accent);
+  }
+
+  .ctl-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .ctl-radio {
+    --ctl-check-size: 16px;
+
+    appearance: none;
+    position: relative;
+    display: inline-flex;
+    width: var(--ctl-check-size);
+    height: var(--ctl-check-size);
+    flex-shrink: 0;
+    border: 1px solid var(--hair);
+    border-radius: 999px;
+    background: var(--surface);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    transition: border-color 0.15s var(--ease);
+  }
+
+  /* the indicator mounts only when checked */
+  .ctl-radio-dot {
+    position: absolute;
+    inset: 3px;
+    border-radius: 999px;
+    background: var(--accent);
+  }
+
+  .ctl-switch {
+    --ctl-switch-w: 34px;
+    --ctl-switch-h: 20px;
+    --ctl-switch-knob: 14px;
+    --ctl-switch-knob-inset: 2px;
+
+    appearance: none;
+    position: relative;
+    width: var(--ctl-switch-w);
+    height: var(--ctl-switch-h);
+    flex-shrink: 0;
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
+  }
+
+  .ctl-switch-knob {
+    position: absolute;
+    top: var(--ctl-switch-knob-inset, 2px);
+    inset-inline-start: var(--ctl-switch-knob-inset, 2px);
+    display: block;
+    width: var(--ctl-switch-knob, 14px);
+    height: var(--ctl-switch-knob, 14px);
+    border-radius: 0;
+    background: var(--ink-mute);
+    transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
+  }
+}
+
+
+/* ── Select (components/controls/Select.tsx) ─────────────────────────────
+   Trigger wears the ff-input grammar; the popup mirrors the menu-pane read
+   (surface, hair ring, soft shadow) with the shared .ctl-pop travel. */
+@layer components {
+  .ctl-select {
+    /* component tokens — select trigger geometry */
+    --ctl-select-gap: 0.6rem;
+    --ctl-select-pad-block: 0.55rem;
+    --ctl-select-pad-inline: 0.7rem;
+    --ctl-select-font: 0.82rem;
+    --ctl-select-icon: 0.9rem;
+
+    font: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ctl-select-gap);
+    width: 100%;
+    padding: var(--ctl-select-pad-block) var(--ctl-select-pad-inline);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    color: var(--ink);
+    font-family: var(--font-mono);
+    font-size: var(--ctl-select-font);
+    cursor: pointer;
+  }
+
+  .ctl-select svg {
+    width: var(--ctl-select-icon);
+    height: var(--ctl-select-icon);
+    flex-shrink: 0;
+    color: var(--ink-mute);
+  }
+
+  .ctl-select-value {
+    flex: 1;
+    min-width: 0;
+    text-align: start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ctl-select-positioner {
+    z-index: 50;
+  }
+
+  .ctl-select-popup {
+    --ctl-select-popup-min: 8rem;
+    --ctl-select-popup-max: 16rem;
+
+    width: var(--anchor-width);
+    min-width: var(--ctl-select-popup-min);
+    max-height: var(--ctl-select-popup-max);
+    overflow-y: auto;
+    background: var(--surface);
+    color: var(--ink);
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent),
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    padding: 0.25rem;
+  }
+
+  .ctl-select-item {
+    --ctl-select-item-gap: 0.6rem;
+    --ctl-select-item-pad-block: 0.5rem;
+    --ctl-select-item-pad-inline: 0.6rem;
+    --ctl-select-item-font: 0.8rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ctl-select-item-gap);
+    padding: var(--ctl-select-item-pad-block) var(--ctl-select-item-pad-inline);
+    font-family: var(--font-mono);
+    font-size: var(--ctl-select-item-font);
+    color: var(--ink-soft);
+    cursor: pointer;
+    outline: none;
+  }
+
+  .ctl-select-check {
+    --ctl-select-check: 0.85rem;
+
+    display: inline-flex;
+    width: var(--ctl-select-check);
+    height: var(--ctl-select-check);
+    flex-shrink: 0;
+    color: var(--accent);
+  }
+
+  .ctl-select-separator {
+    --ctl-select-sep-margin: 0.6rem;
+
+    height: 1px;
+    background: var(--hair);
+    margin: var(--space-1) var(--ctl-select-sep-margin);
+  }
+}
+
+
+/* ── Slider — the native parameter control (components/controls/Slider.tsx)
+   Values mirror the reference slider mechanic: 4px track, computed accent
+   fill from the tsx, 16px round thumb ringed on focus. */
+@layer components {
+  .ctl-slider {
+    /* component tokens — composite slider rhythm */
+    --ctl-slider-head-gap: 0.8rem;
+    --ctl-slider-head-mb: 0.6rem;
+    --ctl-slider-label-font: 0.6rem;
+    --ctl-slider-value-font: 0.86rem;
+    --ctl-slider-ticks-top: 0.55rem;
+    --ctl-slider-ticks-font: 0.58rem;
+
+    display: block;
+    min-width: 0;
+  }
+
+  .ctl-slider.is-disabled {
+    opacity: 0.5;
+  }
+
+  .ctl-slider-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ctl-slider-head-gap, 0.8rem);
+    margin-bottom: var(--ctl-slider-head-mb, 0.6rem);
+  }
+
+  .ctl-slider-label {
+    font-family: var(--font-mono);
+    font-size: var(--ctl-slider-label-font, 0.6rem);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ink-mute);
+  }
+
+  .ctl-slider-value {
+    font-family: var(--font-mono);
+    font-size: var(--ctl-slider-value-font, 0.86rem);
+    font-variant-numeric: tabular-nums;
+    color: var(--ink);
+  }
+
+
+
+
+
+
+
+
+  .ctl-slider-ticks {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--ctl-slider-ticks-top, 0.55rem);
+    font-family: var(--font-mono);
+    font-size: var(--ctl-slider-ticks-font, 0.58rem);
+    color: var(--ink-mute);
+  }
+}
+
+
+/* ── Table — the plain hairline ledger (components/controls/Table.tsx) ────
+   Mono numerals, one hairline per row, micro-cap header, caption below.
+   Numeric columns take .ctl-table-num (right + tabular figures). Wrap wide
+   tables in .ctl-table-scroll. density="compact" halves cell padding. */
+@layer components {
+  .ctl-table-scroll {
+    overflow-x: auto;
+  }
+
+  .ctl-table {
+    --ctl-table-font: 0.82rem;
+    --ctl-table-th-font: 0.68rem;
+    --ctl-table-th-pad-block: 0.55rem;
+    --ctl-table-cell-pad-block: 0.6rem;
+    --ctl-table-cell-pad-inline: 0.75rem;
+    --ctl-table-caption-font: 0.72rem;
+    --ctl-table-caption-top: 0.7rem;
+    --ctl-table-compact-pad: 0.32rem;
+
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-mono);
+    font-size: var(--ctl-table-font);
+    line-height: 1.5;
+    color: var(--ink);
+  }
+
+  .ctl-table-caption {
+    caption-side: bottom;
+    text-align: start;
+    color: var(--ink-mute);
+    font-size: var(--ctl-table-caption-font, 0.72rem);
+    padding-top: var(--ctl-table-caption-top, 0.7rem);
+  }
+
+  .ctl-table-th {
+    text-align: start;
+    font-weight: 500;
+    font-size: var(--ctl-table-th-font, 0.68rem);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-mute);
+    padding: var(--ctl-table-th-pad-block, 0.55rem) var(--ctl-table-cell-pad-inline, 0.75rem);
+    border-bottom: 1px solid var(--hair-strong);
+    white-space: nowrap;
+  }
+
+  .ctl-table-td {
+    padding: var(--ctl-table-cell-pad-block, 0.6rem) var(--ctl-table-cell-pad-inline, 0.75rem);
+    border-top: 1px solid var(--hair);
+    color: var(--ink);
+    vertical-align: top;
+  }
+
+  /* the header owns the first divider — no doubled hairline */
+  .ctl-table thead + tbody tr:first-child .ctl-table-td,
+  .ctl-table tbody:first-child tr:first-child .ctl-table-td {
+    border-top: 0;
+  }
+
+  .ctl-table-foot .ctl-table-td {
+    border-top: 1px solid var(--hair-strong);
+    font-weight: 600;
+  }
+
+  .ctl-table-num {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+
+/* row wash is state, not default — unlayered so it keeps beating utilities */
+.ctl-table tbody tr:hover .ctl-table-td {
+  background: color-mix(in srgb, var(--ink) 3%, transparent);
+}
+
+/* ── Breadcrumbs — the wayfinding trail (components/controls/Breadcrumbs.tsx) */
+@layer components {
+  .ctl-crumbs ol {
+    --ctl-crumbs-gap: 0.45rem;
+    --ctl-crumbs-font: 0.78rem;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--ctl-crumbs-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-mono);
+    font-size: var(--ctl-crumbs-font);
+  }
+
+  .ctl-crumbs li {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--ctl-crumbs-gap, 0.45rem);
+    min-width: 0;
+  }
+
+  .ctl-crumbs-sep {
+    color: var(--ink-mute);
+  }
+
+  .ctl-crumbs-link {
+    color: var(--ink-soft);
+    text-decoration: none;
+  }
+
+  .ctl-crumbs-current {
+    color: var(--ink);
+  }
+}
+
+/* ── Pagination — the numbered page trail (components/controls/Pagination.tsx)
+   The current page is the one loud control (ink fill); siblings are ghosts. */
+@layer components {
+  .ctl-pagination {
+    --ctl-pagination-gap: 0.4rem;
+    --ctl-pagination-font: 0.8rem;
+    --ctl-pagination-cell: var(--space-5);
+
+    display: flex;
+    align-items: center;
+    gap: var(--ctl-pagination-gap);
+    font-family: var(--font-mono);
+    font-size: var(--ctl-pagination-font);
+  }
+
+  .ctl-pagination-item,
+  .ctl-pagination-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--ctl-pagination-cell, 2rem);
+    height: var(--ctl-pagination-cell, 2rem);
+    padding: 0 var(--space-2);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: transparent;
+    color: var(--ink-soft);
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .ctl-pagination-item.is-current {
+    background: var(--ink);
+    border-color: var(--ink);
+    color: var(--bg);
+    font-weight: 600;
+    cursor: default;
+  }
+
+  .ctl-pagination-gap {
+    --ctl-pagination-gap-inset: 0.1rem;
+
+    color: var(--ink-mute);
+    padding: 0 var(--ctl-pagination-gap-inset);
+  }
+}
+
+
+
+/* ── states (unlayered: must beat call-site utilities) ── */
+
+  .ctl-check[data-checked] {
+    background: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .ctl-check:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+  }
+
+  .ctl-check[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ctl-radio[data-checked] {
+    border-color: var(--accent);
+  }
+
+  .ctl-radio:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+  }
+
+  .ctl-radio[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ctl-switch[data-checked] {
+    background: var(--accent-weak);
+    border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
+  }
+
+  .ctl-switch[data-checked] .ctl-switch-knob {
+    transform: translateX(14px);
+    background: var(--accent);
+  }
+
+  /* the knob anchors at inline-start, so its checked travel is physical and
+     must mirror under dir=rtl (translate has no logical form). */
+  [dir="rtl"] .ctl-switch[data-checked] .ctl-switch-knob {
+    transform: translateX(-14px);
+  }
+
+  .ctl-switch:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+  }
+
+  .ctl-switch[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ctl-select:focus-visible {
+    outline: none;
+    border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+
+  .ctl-select[data-disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .ctl-select-value[data-placeholder] {
+    color: var(--ink-mute);
+  }
+
+  .ctl-select-item[data-highlighted] {
+    background: color-mix(in srgb, var(--ink) 6%, transparent);
+    color: var(--ink);
+  }
+
+  .ctl-select-item[data-selected] {
+    color: var(--accent);
+  }
+
+  .ctl-select-item[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ctl-table[data-density="compact"] .ctl-table-th,
+  .ctl-table[data-density="compact"] .ctl-table-td {
+    padding-top: var(--ctl-table-compact-pad, 0.32rem);
+    padding-bottom: var(--ctl-table-compact-pad, 0.32rem);
+  }
+
+  .ctl-crumbs-link:hover {
+    color: var(--ink);
+  }
+
+  .ctl-pagination-item:hover,
+  .ctl-pagination-step:hover:not(:disabled) {
+    color: var(--ink);
+    border-color: var(--hair-strong);
+  }
+
+  .ctl-pagination-step:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+/* F7: universal focus ring on wayfinding controls */
+.ctl-crumbs-link:focus-visible {
+  outline: none;
+  color: var(--ink);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+.ctl-pagination-item:focus-visible,
+.ctl-pagination-step:focus-visible {
+  outline: none;
+  border-color: var(--hair-strong);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* ── direction-flipped glyph ──────────────────────────────────────────────
+   For an arrow/chevron whose meaning is "toward the inline end" (pagination
+   prev/next, DatePager month steps): the glyph is authored pointing right and
+   mirrored wholesale under dir=rtl. display:inline-block makes a plain inline
+   span transformable; SVGs are replaced elements and scale without it. */
+[dir="rtl"] .ctl-dir-flip {
+  display: inline-block;
+  transform: scaleX(-1);
+}
+/* ── reduced motion ─────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ctl-btn-spinner {
+    animation: none !important;
+  }
+
+  /* skeletons go static — the ink-tint placeholder stays, the sweep stops */
+  .sk::after {
+    animation: none;
+  }
+
+  /* form-kit state swaps go instant */
+  .ctl-check,
+  .ctl-switch,
+  .ctl-switch-knob {
+    transition: none;
+  }
+}
+