@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/base.css

@@ -0,0 +1,994 @@
+@import "@fontsource-variable/inter/opsz.css";
+/*
+ * Fluid Functionalism color tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §1 (DESIGN TOKENS)
+ * at commit b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License
+ * © 2026 Micka Touillaud — fluidfunctionalism.com.
+ *
+ * Migration from upstream: every HEX literal was converted to its exact oklch
+ * equivalent (sRGB → OKLab, round-trip verified to the original hex). The
+ * rgb()/rgba() alpha overlays (--overlay, --hover, --active, --shadow-color,
+ * --dm-*) are kept as-is — they are alpha contracts, not palette colors.
+ *
+ * Every color token is written ONCE, as light-dark(light, dark). Which side
+ * renders is driven by `color-scheme` (set in base.css): :root follows the
+ * OS, and a `.light` or `.dark` class pins it. The block is declared on
+ * `:root, .light, .dark` — not just `:root` — because light-dark() inside a
+ * custom property resolves against the color-scheme of the element the
+ * property is declared on, so a forced-scope subtree becomes its own
+ * resolution point.
+ *
+ * The surface ladder and its shadow recipes live with their primitive in
+ * primitives/surface/surface.css. The one token that cannot ride
+ * light-dark() here — the --overlay RGB triplet (consumed as
+ * rgb(var(--overlay) / α), an alpha contract) — is re-pointed per scheme in
+ * base.css.
+ */
+
+:root,
+.light,
+.dark {
+  /* The surface ladder (--surface-1..8) and the shadow recipes pair with it
+     in primitives/surface/surface.css. */
+
+  /* ── Semantic tokens ── */
+  /* Same color as --surface-1, inlined so the global token set never
+     depends on the surface primitive's CSS being loaded. */
+  --background: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* Same color as --surface-3, inlined for the same reason. */
+  --card: light-dark(oklch(1 0 0), oklch(0.264 0 0));
+  --card-foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* Light `muted` decouples from surface-2: the light surface ladder is so
+     compressed that a ladder value would read as near-white, making anything
+     sitting on it blend together. A slightly greyer value gives muted real
+     semantic presence. Dark keeps the ladder value (= surface-2). */
+  --muted: light-dark(oklch(0.967 0.001 286.375), oklch(0.235 0 0));
+  --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.7155 0 0));
+
+  /* ── Interactive states ── */
+  --accent: light-dark(oklch(0.922 0 0), oklch(0.439 0 0));
+  --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* --accent nudged toward the overlay direction (the switch track's hover). */
+  --accent-hover: color-mix(in oklab, var(--accent), rgb(var(--overlay)) 10%);
+  --selected: light-dark(oklch(0.87 0 0), oklch(0.439 0 0));
+
+  /* ── Borders ──
+     --border mixes from --foreground, so it tracks the theme automatically —
+     including inside nested forced scopes, where light-dark() re-resolves
+     --foreground before the mix happens. */
+  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
+  --ring: light-dark(oklch(0.922 0 0), oklch(0.371 0 0));
+  --input: light-dark(oklch(0.922 0 0), oklch(0.371 0 0));
+
+  /* ── Error / Destructive ── */
+  --destructive: light-dark(oklch(0.6368 0.2078 25.33), oklch(0.7106 0.1661 22.22));
+  --destructive-light: light-dark(oklch(0.971 0.013 17.38), oklch(0.2575 0.0886 26.04));
+
+  /* ── Brand blue ──
+     FF's one chromatic accent: the switch's on-track, the copy field's hover
+     highlight, drop-target and selected-swatch rings. */
+  --brand: oklch(0.693 0.16 265);
+  --brand-hover: oklch(0.649 0.164 264.76);
+
+  /* ── Focus indicator ──
+     Every component focus ring reads it (`ring-focus-ring`,
+     `border-focus-ring`), so this is the single theming point. */
+  --focus-ring: var(--brand);
+
+  /* ── Alpha checkerboard (color-picker swatches) ── */
+  --checker-a: light-dark(oklch(0.792 0 0), oklch(0.239 0 0));
+  --checker-b: light-dark(oklch(1 0 0), oklch(0.285 0 0));
+  /* Swatch edges: a mid-grey hairline that reads on any swatch color in
+     either scheme, plus the hover / selected rings, set off by a
+     --background gap. */
+  --swatch-edge: rgb(127 127 127 / 0.25);
+  --swatch-edge-hover: rgb(127 127 127 / 0.4);
+  --shadow-swatch: inset 0 0 0 1px var(--swatch-edge);
+  --shadow-swatch-hover: var(--shadow-swatch), 0 0 0 2px var(--background), 0 0 0 4px var(--swatch-edge-hover);
+  --shadow-swatch-selected: var(--shadow-swatch), 0 0 0 2px var(--background), 0 0 0 4px var(--brand);
+
+  /* ── Thumbs (switch, slider) ──
+     White in both schemes, set off by a soft drop. */
+  --thumb: oklch(1 0 0);
+  --shadow-thumb: 0 1px 2px rgb(0 0 0 / 0.1);
+
+  /* ── Color picker affordances ──
+     Drawn over any user color, so fixed white and black rather than theme
+     colors: they have to read on every fill, in either scheme. */
+  --picker-edge: oklch(0 0 0);
+  --picker-ring: oklch(1 0 0 / 0.55);
+  --picker-thumb-border: oklch(1 0 0 / 0.9);
+  --shadow-picker-thumb: 0 0 0 1px var(--picker-edge);
+  --shadow-picker-cursor: 0 0 0 1px oklch(0 0 0 / 0.2);
+  --drop-shadow-picker-cursor: 0 1px 1px oklch(0 0 0 / 0.4);
+
+  /* ── Controls ──
+     An unchecked checkbox or radio takes a stronger edge than --border;
+     a modal dialog dims the page behind it with the scrim. */
+  --control-border: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
+  --scrim: light-dark(oklch(0 0 0 / 0.4), oklch(0 0 0 / 0.8));
+
+  /* ── Surface-relative interactive overlays (work on any elevation) ──
+     --overlay is the tint-direction triplet — black for light surfaces,
+     white for dark. Components consume it as rgb(var(--overlay) / α), so it
+     stays an RGB triplet and switches per theme in base.css. --hover and
+     --active are the pre-mixed conveniences. */
+  --overlay: 0 0 0;
+  --hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06));
+  --active: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.1));
+
+  /* ── Syntax (primitives/code) ──
+     Low-chroma hues so code reads as text first; identifiers, JSX text and
+     punctuation ride the existing foreground pair. */
+  --syntax-keyword: light-dark(oklch(0.52 0.16 300), oklch(0.76 0.12 300));
+  --syntax-string: light-dark(oklch(0.52 0.12 150), oklch(0.79 0.11 150));
+  --syntax-class: light-dark(oklch(0.56 0.12 65), oklch(0.81 0.1 75));
+  --syntax-entity: light-dark(oklch(0.52 0.15 255), oklch(0.77 0.11 250));
+  --syntax-property: light-dark(oklch(0.52 0.1 205), oklch(0.79 0.08 200));
+  --syntax-comment: light-dark(oklch(0.62 0 0), oklch(0.56 0 0));
+  --syntax-identifier: var(--foreground);
+  --syntax-jsx: var(--foreground);
+  --syntax-sign: var(--muted-foreground);
+}
+
+/* ── Badge palette ──
+   Badge's `color` hues (upstream hex, as exact oklch). Constant across
+   schemes; the solid variant mixes each 15% into --background. */
+:root {
+  --badge-gray: oklch(0.715 0 0);
+  --badge-red: oklch(0.637 0.208 25.33);
+  --badge-orange: oklch(0.7049 0.1867 47.6);
+  --badge-amber: oklch(0.7686 0.1647 70.08);
+  --badge-yellow: oklch(0.7952 0.1617 86.05);
+  --badge-lime: oklch(0.7681 0.2044 130.85);
+  --badge-green: oklch(0.723 0.192 149.58);
+  --badge-emerald: oklch(0.6959 0.1491 162.48);
+  --badge-teal: oklch(0.704 0.123 182.5);
+  --badge-cyan: oklch(0.7148 0.1257 215.22);
+  --badge-blue: oklch(0.623 0.188 259.81);
+  --badge-indigo: oklch(0.585 0.204 277.12);
+  --badge-violet: oklch(0.606 0.219 292.72);
+  --badge-purple: oklch(0.627 0.233 303.9);
+  --badge-fuchsia: oklch(0.667 0.259 322.15);
+  --badge-pink: oklch(0.656 0.212 354.31);
+  --badge-rose: oklch(0.645 0.215 16.44);
+}
+
+/* ── Status roles ──
+   The toast states, picked from the badge palette (and --destructive /
+   --brand) by reference, so a status reads the same wherever it shows. */
+:root {
+  --status-success: var(--badge-green);
+  --status-loading: var(--badge-gray);
+  --status-error: var(--destructive);
+  --status-warning: var(--badge-amber);
+  --status-info: var(--badge-blue);
+  --status-action: var(--brand);
+}
+
+/*
+ * Fluid Functionalism motion tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `registry/default/lib/springs.ts`
+ * at commit b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026
+ * Micka Touillaud — fluidfunctionalism.com.
+ *
+ * FF's motion is JS: the `spring` tiers in lib/springs.ts feed
+ * `motion/react`, and components always reach for a tier rather than a
+ * hand-written duration. These properties mirror those tiers for CSS
+ * consumers and for the tokens page — keep the two in sync.
+ *
+ * Each tier's enter transition is a spring of the given duration; its exit is
+ * a plain tween one step quicker, so a dismissal reads as crisp and final.
+ *   fast      80ms enter, 60ms exit   — critically damped (bounce 0)
+ *   moderate  160ms enter, 120ms exit — critically damped (bounce 0): panels,
+ *             dropdowns, tabs, merged selection backgrounds
+ *   slow      240ms enter, 160ms exit — the one tier with a little bounce
+ *             (bounce 0.12)
+ * The bigger the thing that moves, the slower the tier.
+ *
+ * Local addition: `goo`, the morph engine's tier for the goo effect — 250ms
+ * to land (bounce 0.15), a 200ms spring back — so the liquid neck reads.
+ */
+
+:root {
+  --duration-fast: 80ms;
+  --duration-fast-exit: 60ms;
+  --duration-moderate: 160ms;
+  --duration-moderate-exit: 120ms;
+  --duration-slow: 240ms;
+  --duration-slow-exit: 160ms;
+  --duration-goo: 250ms;
+  --duration-goo-exit: 200ms;
+}
+
+:root {
+  /* Fluid Functionalism's corner token (upstream tokens/radius.css). */
+  --radius: 0.625rem;
+
+  /* Small-box corners between wind4's xs (2px) and md (6px) steps, read by
+     the `rounded-box|glyph` utility in preset.ts: checkbox squares and
+     keycaps, and the composer's stop glyph. */
+  --radius-box: 5px;
+  --radius-glyph: 3px;
+}
+
+:root {
+  /* The docs chrome's spacing rhythm (AGENTS.md generic tokens). */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+}
+
+/*
+ * Fluid Functionalism type tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §3–4 (`--font-sans`,
+ * the `--fs-*` type-scale roles and their `@utility text-*` classes) at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026 Micka
+ * Touillaud — fluidfunctionalism.com.
+ *
+ * Local changes:
+ * - The family is Inter Variable from @fontsource-variable/inter/opsz
+ *   (imported in base.css) instead of upstream's self-hosted
+ *   InterVariable.ttf. The opsz build matters: the `--weight-*` ladder sets
+ *   both the wght and opsz axes.
+ * - The role sizes are renamed `--fs-*` → `--text-*` and read by the
+ *   `text-<role>[-compact]` utility in preset.ts. They hold both columns of
+ *   `typeScale` in lib/size-context.tsx (keep the two in sync), so a
+ *   component's `compact ? … : …` picks a token on either side. Upstream's
+ *   site-chrome extras — the 22px mobile display step and the
+ *   `html[data-size="compact"]` override set by the docs site's
+ *   SizeAttribute — are not carried over.
+ * - `micro` (keycaps, one notch below caption) is a local role.
+ * - Each role's line-height (FF's typography page: 28/34, 16/22, 14/20,
+ *   13/20, 12/16) is a `--leading-*` token, emitted by the same
+ *   `text-<role>` rule; the compact step keeps its role's leading.
+ * - The docs chrome's element roles (`--font-size-<el>`, `--line-height-<el>`,
+ *   `--font-weight-<el>`, `--color-<el>`) reference these, following FF's
+ *   rules: headings in foreground, text muted.
+ * - Upstream's `fontWeights` (lib/font-weight.ts, fontVariationSettings
+ *   strings) become the `--weight-*` variation settings, read by the
+ *   `weight-*` utility in preset.ts. Each derives its wght from
+ *   `--font-weight-*`, the plain font-weight form the docs chrome reads.
+ */
+
+:root {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Page titles. */
+  --text-display: 28px;
+  /* Section headings, dialog titles. */
+  --text-title: 16px;
+  /* Card titles, emphasized rows. */
+  --text-subtitle: 14px;
+  /* Control labels and body copy. */
+  --text-body: 13px;
+  /* Secondary text: descriptions, meta rows, errors, group labels. */
+  --text-caption: 12px;
+  /* Keycaps and chips. */
+  --text-micro: 11px;
+
+  /* Each role's paired line-height. */
+  --leading-display: 34px;
+  --leading-title: 22px;
+  --leading-subtitle: 20px;
+  --leading-body: 20px;
+  --leading-caption: 16px;
+  --leading-micro: 14px;
+
+  /* The compact step: each role one notch down. */
+  --text-display-compact: 24px;
+  --text-title-compact: 15px;
+  --text-subtitle-compact: 13px;
+  --text-body-compact: 12px;
+  --text-caption-compact: 11px;
+  --text-micro-compact: 10px;
+
+  /* Inter variable weights, each paired with the opsz that keeps a label's
+     advance width steady as it changes weight. */
+  --font-weight-normal: 400;
+  --font-weight-medium: 450;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 700;
+  --weight-normal: "wght" var(--font-weight-normal), "opsz" 14;
+  --weight-medium: "wght" var(--font-weight-medium), "opsz" 15;
+  --weight-semibold: "wght" var(--font-weight-semibold), "opsz" 18;
+  --weight-bold: "wght" var(--font-weight-bold), "opsz" 25;
+
+  /* The docs chrome's elements (modo's type contract), on the roles above. */
+  --font-size-h1: var(--text-display);
+  --line-height-h1: var(--leading-display);
+  --font-weight-h1: var(--font-weight-bold);
+  --color-h1: var(--foreground);
+
+  --font-size-h2: var(--text-title);
+  --line-height-h2: var(--leading-title);
+  --font-weight-h2: var(--font-weight-semibold);
+  --color-h2: var(--foreground);
+
+  --font-size-h3: var(--text-subtitle);
+  --line-height-h3: var(--leading-subtitle);
+  --font-weight-h3: var(--font-weight-semibold);
+  --color-h3: var(--foreground);
+
+  --font-size-h4: var(--text-body);
+  --line-height-h4: var(--leading-body);
+  --font-weight-h4: var(--font-weight-semibold);
+  --color-h4: var(--foreground);
+
+  --font-size-p: var(--text-body);
+  --line-height-p: var(--leading-body);
+  --font-weight-p: var(--font-weight-normal);
+  --color-p: var(--muted-foreground);
+
+  --font-size-lead: var(--text-body);
+  --line-height-lead: var(--leading-body);
+  --font-weight-lead: var(--font-weight-normal);
+  --color-lead: var(--muted-foreground);
+
+  --font-size-eyebrow: var(--text-caption);
+  --line-height-eyebrow: var(--leading-caption);
+  --font-weight-eyebrow: var(--font-weight-medium);
+  --color-eyebrow: var(--muted-foreground);
+
+  --font-size-sm: var(--text-caption);
+  --line-height-sm: var(--leading-caption);
+
+  --font-size-xs: var(--text-micro);
+  --line-height-xs: var(--leading-micro);
+}
+
+/* biome-ignore-all lint: vendored upstream code keeps its own values (see the header) */
+/*
+ * UI theme plumbing and base styles.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026 Micka
+ * Touillaud — fluidfunctionalism.com. Translated from Tailwind v4 CSS to
+ * plain CSS for UnoCSS (uno.config.ts); vite.ts injects the UnoCSS
+ * stylesheet ahead of this file. The docs site imports it from global.css;
+ * the package ships it inside dist/base.css and dist/styles.css.
+ *
+ * Where upstream's sections went:
+ * - §1 design tokens → tokens/colors.css; the surface ladder and shadow
+ *   recipes → primitives/surface/surface.css. All HEX migrated to oklch.
+ * - §2 theme switching → the color-scheme / --overlay block below (the
+ *   shadow re-pointing lives in surface.css).
+ * - §3 `@theme inline` → preset.ts `theme`; the `--fs-*` roles and
+ *   `@utility text-*` → tokens/typography.css (`--text-*`) + preset.ts
+ *   `utilities`.
+ * - §4–6 → below: html/body base, `@layer base` (text wrap, inline code chip,
+ *   :focus-visible fallback), html.transitioning, native scrollbars,
+ *   .scrollbar-hide, shimmer + spinner keyframes, .scroll-fade(-x).
+ *
+ * Local value changes: the inline code chip and the shimmer stops read color
+ * tokens instead of upstream's hex (light code chip `--muted`, dark
+ * `--surface-4`; shimmer dim → bright runs `--muted-foreground` →
+ * `--foreground` in light and `--accent` → `--muted-foreground` in dark).
+ *
+ * Dropped: the Tailwind directives (`@import "tailwindcss"`,
+ * `@custom-variant`), the self-hosted Inter @font-face (replaced by
+ * @fontsource-variable/inter/opsz), the Radix-only scroll-lock margin fix
+ * (`body[data-scroll-locked]`), the reserved shadcn-compare colors, and the
+ * docs-site-only CSS (.xl-fade-*, .inview-fade-block, .scroll-divider — only
+ * the omitted Sidebar uses it — .bento-*, .shiki).
+ *
+ * Layers: UnoCSS (`outputToCssLayers`) declares `@layer properties, theme,
+ * base, default` first, and its reset lives in `base`. The `@layer base`
+ * rules here join that layer after the reset, so the reset loses to them and
+ * every utility (`default`) still wins — the same arrangement as Tailwind's
+ * base/utilities layers upstream.
+ *
+ * The switch blocks double their class selector (.light.light / .dark.dark)
+ * because user CSS is injected BEFORE tokens/*.css and item CSS — the
+ * doubled selector (0,2,0) must out-specify the shared `:root, .light,
+ * .dark` token blocks (0,1,0) so the re-pointed values win regardless of
+ * stylesheet order.
+ */
+
+
+/* ── Theme switching (upstream §2) ──
+   `color-scheme` is what flips every light-dark() token; the classes work on
+   <html> (vite.ts puts the stored preference there, or the OS one under
+   'system') and on any subtree (forced-theme previews). The only value that can't ride light-dark() here
+   is the --overlay RGB triplet, consumed as rgb(var(--overlay) / α). */
+
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --overlay: 255 255 255;
+  }
+}
+
+.light.light {
+  color-scheme: light;
+  --overlay: 0 0 0;
+}
+
+.dark.dark {
+  color-scheme: dark;
+  --overlay: 255 255 255;
+}
+
+/* ── Base styles (upstream §4) ── */
+
+/* No explicit overflow here: scrollbar-gutter applies to the viewport when
+   set on the root, and an explicit `overflow-y: auto` would stop dialog
+   scroll locks (`body { overflow: hidden }`) from propagating to the
+   viewport. */
+html {
+  scrollbar-gutter: stable;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100vh;
+  overscroll-behavior-y: none;
+  background-color: var(--background);
+  /* Explicit text color so unstyled text follows the theme (and so the UA's
+     color-scheme-driven canvastext default never shows through). */
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  /* Inherited by everything (portals included) — a `subpixel-antialiased`
+     utility on a subtree is the only way to opt back out. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* @layer base so a utility can still win: unlayered, these outrank
+   `truncate` on the text-wrap-mode longhand (white-space is a shorthand for
+   white-space-collapse + text-wrap-mode), which silently un-truncates every
+   <p> that asks for it. */
+@layer base {
+  h1,
+  h2,
+  h3 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  /* Inline code chips: bare <code> in prose gets its own ground. Excludes
+     code inside <pre>. Base layer, so a page can still override with
+     utilities. */
+  code:not(pre code) {
+    background: light-dark(var(--muted), var(--surface-4));
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: var(--text-caption, 12px);
+    color: var(--foreground, inherit);
+  }
+}
+
+/* Theme-toggle cross-fade: ShapeProvider (and any theme switcher) adds
+   `.transitioning` around a class swap so colors and corners tween instead of
+   snapping. */
+html.transitioning *,
+html.transitioning *::before,
+html.transitioning *::after {
+  transition:
+    border-radius 180ms ease-in-out,
+    background-color 180ms ease-in-out,
+    color 180ms ease-in-out,
+    border-color 180ms ease-in-out,
+    fill 180ms ease-in-out,
+    stroke 180ms ease-in-out !important;
+}
+
+/* Focus fallback — natively focusable elements no component styles (scroll
+   containers Chrome makes tabbable, prose links, demo boxes) get the same
+   token ring as the components instead of the UA default. Lives in
+   @layer base so `outline-none` (a utility) still wins — components that
+   draw their own ring aren't double-ringed. The radius rides
+   --shape-input-radius (published by ShapeProvider); 8px = the rounded-mode
+   default. */
+@layer base {
+  :focus-visible {
+    outline: 1px solid var(--focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--shape-input-radius, 8px);
+  }
+
+  /* Prose links are inline text boxes — the shape-system radius reads
+     pill-ish at text height, so their ring takes a tight 2px corner. */
+  a:focus-visible {
+    border-radius: 2px;
+  }
+}
+
+/* ── Native scrollbar theme (upstream §5) ──
+   Matches the ScrollArea thumb language (narrow, low-contrast, darkens on
+   hover) so surfaces that fall back to native scrollbars stay consistent
+   with the custom scrollbar. Rides the surface-relative overlay ramp (rest
+   8%, hover 12%, drag 16%) — adapts to dark mode through --overlay. Only on
+   fine pointers; touch devices keep their overlay momentum bars. Chromium
+   121+ renders scrollbar-color and ignores the ::-webkit-* block, so both
+   ramps must stay in sync. */
+
+@media (pointer: fine) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(var(--overlay) / 0.08) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    /* Transparent borders + content-box clip leave a ~4px visible thumb
+       inside the 10px hit area; the asymmetric edge-side border slides it
+       2px away from the edge, matching the ScrollArea thumb's nudge. */
+    background-color: rgb(var(--overlay) / 0.08);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:vertical {
+    border-left-width: 1px;
+    border-right-width: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    border-top-width: 1px;
+    border-bottom-width: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(var(--overlay) / 0.12);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: rgb(var(--overlay) / 0.16);
+  }
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Utilities (upstream §6) ── */
+
+/* shimmer-text (thinking-indicator) */
+
+@keyframes shimmer {
+  0% {
+    background-position: 0% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.shimmer-text {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    light-dark(var(--muted-foreground), var(--accent)) 0%,
+    light-dark(var(--muted-foreground), var(--accent)) 35%,
+    light-dark(var(--foreground), var(--muted-foreground)) 50%,
+    light-dark(var(--muted-foreground), var(--accent)) 65%,
+    light-dark(var(--muted-foreground), var(--accent)) 100%
+  );
+  background-size: 300% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Spinner keyframes (Button's loading state). */
+
+@keyframes spinner-move {
+  to {
+    stroke-dashoffset: -100;
+  }
+}
+
+@keyframes spinner-dash {
+  0%,
+  100% {
+    stroke-dasharray: 15 85;
+  }
+  50% {
+    stroke-dasharray: 40 60;
+  }
+}
+
+/* scroll-fade — vendored equivalent of shadcn's scroll-fade utility. A
+   mask-image dissolves the content toward the edges that have more to
+   scroll. CSS scroll-driven animations make it scroll-aware: the true
+   start/end edge stays crisp until you scroll past it. Browsers without
+   scroll-driven animations fall back to a static fade on both edges. Apply
+   to a scroll container, or to a ScrollArea via `viewportClassName`. */
+
+@property --sf-start {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --sf-end {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@keyframes sf-reveal-start {
+  from {
+    --sf-start: 1;
+  }
+  to {
+    --sf-start: 0;
+  }
+}
+@keyframes sf-reveal-end {
+  from {
+    --sf-end: 0;
+  }
+  to {
+    --sf-end: 1;
+  }
+}
+
+.scroll-fade,
+.scroll-fade-x {
+  --scroll-fade-size: 48px;
+}
+
+/* Static fallback: fade both edges. */
+.scroll-fade {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+}
+.scroll-fade-x {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+}
+
+/* Scroll-aware: the start/end edge stays solid until there's content past it. */
+@supports (animation-timeline: scroll()) {
+  .scroll-fade {
+    mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    animation:
+      sf-reveal-start both linear,
+      sf-reveal-end both linear;
+    animation-timeline: scroll(self), scroll(self);
+    animation-range-start: 0, calc(100% - var(--scroll-fade-size));
+    animation-range-end: var(--scroll-fade-size), 100%;
+  }
+  .scroll-fade-x {
+    mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    animation:
+      sf-reveal-start both linear,
+      sf-reveal-end both linear;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range-start: 0, calc(100% - var(--scroll-fade-size));
+    animation-range-end: var(--scroll-fade-size), 100%;
+  }
+}
+
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `app/globals.css` (`.scroll-divider`) @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications: none (modo injects this file beside the Sidebar).
+ */
+
+/* ── scroll-divider — a hairline marking a scroll edge ──────────────────────
+   Pairs with .scroll-fade on a descendant viewport: where the fade dissolves
+   content, this draws the line that says "the region continues". The line
+   can't live inside the scroller — the fade's own mask would erase it at
+   exactly the edge it belongs on — so it rides the parent's pseudo-elements
+   and borrows the scroller's timeline by name. Browsers without scroll-driven
+   timelines simply get the fade, as before. */
+@keyframes sf-divider-start {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes sf-divider-end {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@supports (timeline-scope: --sf) {
+  .scroll-divider {
+    position: relative;
+    timeline-scope: --sf-scroller;
+    --scroll-divider-size: 48px;
+  }
+  .scroll-divider .scroll-fade {
+    scroll-timeline-name: --sf-scroller;
+  }
+  .scroll-divider::before,
+  .scroll-divider::after {
+    content: "";
+    position: absolute;
+    /* Inset so the line can hug the content's own gutter rather than the
+       panel edge — the sidebar's inset variant sets this to 8px. */
+    left: var(--scroll-divider-inset, 0px);
+    right: var(--scroll-divider-inset, 0px);
+    height: 1px;
+    background-color: var(--border);
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+  }
+  /* Top edge: absent at rest, fading in as content passes above. */
+  .scroll-divider::before {
+    top: 0;
+    animation: sf-divider-start both linear;
+    animation-timeline: --sf-scroller;
+    animation-range: 0 var(--scroll-divider-size);
+  }
+  /* A region flush with the panel's own top edge has nothing above for
+     content to pass under, so the start line would read as a stray border. */
+  .scroll-divider:first-child::before {
+    content: none;
+  }
+  /* Bottom edge: present while content continues below, gone at the end. */
+  .scroll-divider::after {
+    bottom: 0;
+    animation: sf-divider-end both linear;
+    animation-timeline: --sf-scroller;
+    animation-range: calc(100% - var(--scroll-divider-size)) 100%;
+  }
+}
+
+/* biome-ignore-all lint: vendored upstream code keeps its own values (see the header) */
+/*
+ * Surface elevation module: the 8-level surface ladder and its 1:1 shadow
+ * recipes, plus the per-scheme selection of the active --shadow-N alias.
+ *
+ * Extracted from tokens/colors.css and base.css — the elevation system
+ * belongs to this primitive, not the global token set.
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §1–2 at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License
+ * © 2026 Micka Touillaud — fluidfunctionalism.com. All HEX migrated to
+ * exact oklch (see tokens/colors.css for the note).
+ *
+ * Like tokens/colors.css, the token block is declared on
+ * `:root, .light, .dark` so light-dark() re-resolves per forced scope. The
+ * switch blocks double their class selector (.light.light / .dark.dark) to
+ * out-specify the shared (0,1,0) token block regardless of stylesheet
+ * order.
+ */
+
+:root,
+.light,
+.dark {
+  /* ── Surfaces (8-level ladder) ──
+     Light: 2 color steps (floor, sunken) then flat white; shadow does the
+     work. Dark: additive white-opacity ladder over near-black. Each surface
+     pairs 1:1 with a shadow recipe (--shadow-1 .. --shadow-8). */
+  --surface-1: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --surface-2: light-dark(oklch(0.991 0 0), oklch(0.235 0 0));
+  --surface-3: light-dark(oklch(1 0 0), oklch(0.264 0 0));
+  --surface-4: light-dark(oklch(1 0 0), oklch(0.293 0 0));
+  --surface-5: light-dark(oklch(1 0 0), oklch(0.321 0 0));
+  --surface-6: light-dark(oklch(1 0 0), oklch(0.349 0 0));
+  --surface-7: light-dark(oklch(1 0 0), oklch(0.375 0 0));
+  --surface-8: light-dark(oklch(1 0 0), oklch(0.402 0 0));
+
+  /* ── Shadow recipes ──
+     Light: additive stacked drops, halving offsets (1/3/6/12/24/48/96 px).
+     Dark: inset highlight + inset ring + stacked drops.
+     Structurally different, so each ladder is written out once here and the
+     active --shadow-N is selected per scheme below.
+     --shadow-color is intentionally static: it is also consumed directly by
+     components and has never varied by theme. */
+  --shadow-color: rgb(0 0 0 / 0.06);
+  --shadow-light-1: 0 0 0 1px var(--shadow-color);
+  --shadow-light-2: 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color);
+  --shadow-light-3:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color);
+  --shadow-light-4:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    );
+  --shadow-light-5:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color);
+  --shadow-light-6:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color);
+  --shadow-light-7:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(
+      --shadow-color
+    );
+  --shadow-light-8:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(
+      --shadow-color
+    ), 0 96px 96px -48px var(--shadow-color);
+  /* Surface-2/3 with the hairline moved INSIDE the box — for cards whose
+     border must stay within their own edge. Dark's recipes already draw
+     their ring inset, so dark scopes alias --shadow-dark-2/3 directly. */
+  --shadow-light-2-inset: inset 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color);
+  --shadow-light-3-inset:
+    inset 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color);
+
+  --dm-hi-base: rgba(255, 255, 255, 0.01);
+  --dm-hi-mid: rgba(255, 255, 255, 0.02);
+  --dm-hi-high: rgba(255, 255, 255, 0.04);
+  --dm-hi-peak: rgba(255, 255, 255, 0.06);
+  --dm-ring-base: rgba(255, 255, 255, 0.02);
+  --dm-ring-mid: rgba(255, 255, 255, 0.04);
+  --dm-ring-high: rgba(255, 255, 255, 0.06);
+  --dm-drop: rgba(0, 0, 0, 0.18);
+  --shadow-dark-1: inset 0 0 0 1px var(--dm-ring-base);
+  --shadow-dark-2:
+    inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop);
+  --shadow-dark-3:
+    inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop);
+  --shadow-dark-4:
+    inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop);
+  --shadow-dark-5:
+    inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop);
+  --shadow-dark-6:
+    inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(
+      --dm-drop
+    );
+  --shadow-dark-7:
+    inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(
+      --dm-drop
+    ), 0 48px 48px -24px var(--dm-drop);
+  --shadow-dark-8:
+    inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(
+      --dm-drop
+    ), 0 48px 48px -24px var(--dm-drop), 0 96px 96px -48px var(--dm-drop);
+
+  --shadow-1: var(--shadow-light-1);
+  --shadow-2: var(--shadow-light-2);
+  --shadow-3: var(--shadow-light-3);
+  --shadow-4: var(--shadow-light-4);
+  --shadow-5: var(--shadow-light-5);
+  --shadow-6: var(--shadow-light-6);
+  --shadow-7: var(--shadow-light-7);
+  --shadow-8: var(--shadow-light-8);
+  --shadow-2-inset: var(--shadow-light-2-inset);
+  --shadow-3-inset: var(--shadow-light-3-inset);
+}
+
+/* ── Per-scheme shadow selection ──
+   The light/dark recipes are structurally different, so they cannot ride
+   light-dark(); the active --shadow-N alias is re-pointed per scheme here. */
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --shadow-1: var(--shadow-dark-1);
+    --shadow-2: var(--shadow-dark-2);
+    --shadow-3: var(--shadow-dark-3);
+    --shadow-4: var(--shadow-dark-4);
+    --shadow-5: var(--shadow-dark-5);
+    --shadow-6: var(--shadow-dark-6);
+    --shadow-7: var(--shadow-dark-7);
+    --shadow-8: var(--shadow-dark-8);
+    --shadow-2-inset: var(--shadow-dark-2);
+    --shadow-3-inset: var(--shadow-dark-3);
+  }
+}
+
+.light.light {
+  --shadow-1: var(--shadow-light-1);
+  --shadow-2: var(--shadow-light-2);
+  --shadow-3: var(--shadow-light-3);
+  --shadow-4: var(--shadow-light-4);
+  --shadow-5: var(--shadow-light-5);
+  --shadow-6: var(--shadow-light-6);
+  --shadow-7: var(--shadow-light-7);
+  --shadow-8: var(--shadow-light-8);
+  --shadow-2-inset: var(--shadow-light-2-inset);
+  --shadow-3-inset: var(--shadow-light-3-inset);
+}
+
+.dark.dark {
+  --shadow-1: var(--shadow-dark-1);
+  --shadow-2: var(--shadow-dark-2);
+  --shadow-3: var(--shadow-dark-3);
+  --shadow-4: var(--shadow-dark-4);
+  --shadow-5: var(--shadow-dark-5);
+  --shadow-6: var(--shadow-dark-6);
+  --shadow-7: var(--shadow-dark-7);
+  --shadow-8: var(--shadow-dark-8);
+  --shadow-2-inset: var(--shadow-dark-2);
+  --shadow-3-inset: var(--shadow-dark-3);
+}