@adea-ai/ui 0.60.3 → 0.61.0

package/src/styles/base.css

@@ -1,42 +1,26 @@
-/* Neutral Tailwind base layer for the shared UI kit: the state variants and
-   utilities the components rely on. Framework-neutral CSS only — no component
-   runtime, no styling tokens (those live in theme.css and friends). */
+/* ============================================================================
+ * Adea base layer
+ * ============================================================================
+ *
+ * Framework-neutral CSS that the components depend on but that carries no
+ * token values (those live in `theme.css`):
+ *
+ *   - the component-state variants Kobalte and corvu emit data attributes for
+ *   - keyframes and entrance animations
+ *   - the named utilities the design system exposes to consumers
+ *   - the base layer: focus ring, scrollbars, selection, reduced-motion
+ *
+ * Everything here ships as CSS. Nothing in this file may be duplicated in a
+ * component's class list.
+ * ========================================================================== */
 
 @import 'tw-animate-css';
 
-@theme inline {
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--accordion-panel-height, auto);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--accordion-panel-height, auto);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-/* A tooltip is informational: neither its popper positioner nor its content may
-   intercept the pointer and block the control the tooltip describes. The layer
-   stack writes `pointer-events: auto` inline on the active layer, so the
-   content needs `!important` to stay out of the pointer path. */
-[data-popper-positioner]:has(> [data-slot='tooltip-content']) {
-  pointer-events: none;
-}
-
-[data-slot='tooltip-content'] {
-  pointer-events: none !important;
-}
-
-/* Custom variants */
+/* --- State variants ------------------------------------------------------
+ * Kobalte and corvu communicate state through data attributes. Spelling the
+ * mapping once here means a component writes `data-open:opacity-100` and gets
+ * the right behaviour from either library.
+ * ------------------------------------------------------------------------ */
 @custom-variant data-open {
   &:where([data-state='open']),
   &:where([data-open]:not([data-open='false'])) {
@@ -51,6 +35,16 @@
   }
 }
 
+/* Kobalte marks every expanded disclosure and every open overlay with
+   `data-expanded`; the `data-state` spelling is kept too so a component
+   written against either protocol behaves the same. */
+@custom-variant data-expanded {
+  &:where([data-state='expanded']),
+  &:where([data-expanded]:not([data-expanded='false'])) {
+    @slot;
+  }
+}
+
 @custom-variant data-checked {
   &:where([data-state='checked']),
   &:where([data-checked]:not([data-checked='false'])) {
@@ -78,6 +72,19 @@
   }
 }
 
+@custom-variant data-highlighted {
+  &:where([data-highlighted]) {
+    @slot;
+  }
+}
+
+@custom-variant data-invalid {
+  &:where([data-invalid='true']),
+  &:where([data-invalid]:not([data-invalid='false'])) {
+    @slot;
+  }
+}
+
 @custom-variant data-active {
   &:where([data-state='active']),
   &:where([data-active]:not([data-active='false'])) {
@@ -97,543 +104,541 @@
   }
 }
 
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* scroll-fade */
-@property --scroll-fade-t {
-  syntax: '<length-percentage>';
-  inherits: false;
-  initial-value: 0px;
-}
-@property --scroll-fade-b {
-  syntax: '<length-percentage>';
-  inherits: false;
-  initial-value: 0px;
-}
-@property --scroll-fade-s {
-  syntax: '<length-percentage>';
-  inherits: false;
-  initial-value: 0px;
-}
-@property --scroll-fade-e {
-  syntax: '<length-percentage>';
-  inherits: false;
-  initial-value: 0px;
-}
-@property --scroll-fade-mask {
-  syntax: '*';
-  inherits: false;
-}
-
+/* --- Keyframes -----------------------------------------------------------
+ * Entrances only. Exits reuse the same geometry inverted through
+ * `tw-animate-css`, and state changes use a transition rather than a keyframe
+ * so they stay interruptible.
+ * ------------------------------------------------------------------------ */
 @theme inline {
-  @keyframes scroll-fade-reveal-t {
+  @keyframes ds-rise {
     from {
-      --scroll-fade-t: 0px;
+      opacity: 0;
+      transform: translateY(8px);
     }
     to {
-      --scroll-fade-t: var(
-        --_scroll-fade-size-t,
-        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-      );
+      opacity: 1;
+      transform: translateY(0);
     }
   }
-  @keyframes scroll-fade-reveal-b {
+
+  @keyframes ds-scale-in {
     from {
-      --scroll-fade-b: var(
-        --_scroll-fade-size-b,
-        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-      );
+      opacity: 0;
+      transform: scale(0.96);
     }
     to {
-      --scroll-fade-b: 0px;
+      opacity: 1;
+      transform: scale(1);
     }
   }
-  @keyframes scroll-fade-reveal-s {
+
+  @keyframes ds-shimmer {
     from {
-      --scroll-fade-s: 0px;
+      background-position: 100% 0;
     }
     to {
-      --scroll-fade-s: var(
-        --_scroll-fade-size-s,
-        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-      );
+      background-position: 0 0;
     }
   }
-  @keyframes scroll-fade-reveal-e {
+
+  @keyframes ds-indeterminate {
     from {
-      --scroll-fade-e: var(
-        --_scroll-fade-size-e,
-        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-      );
+      transform: translateX(-100%);
     }
     to {
-      --scroll-fade-e: 0px;
+      transform: translateX(400%);
+    }
+  }
+
+  @keyframes ds-caret {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
     }
   }
 }
 
-@utility scroll-fade {
-  --_scroll-fade-size-t: var(
-    --scroll-fade-t-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --_scroll-fade-size-b: var(
-    --scroll-fade-b-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-block: linear-gradient(
+/* --- Named utilities ----------------------------------------------------- */
+
+/**
+ * Visible to a screen reader, invisible on screen.
+ *
+ * This is the single most important utility in the system and it must be
+ * available in every build, which is why it lives here rather than in the
+ * optional stylesheet. `display: none` would remove the content from the
+ * accessibility tree as well; this clips it to a pixel instead, so the text is
+ * still announced, still translatable, and still reachable by find-in-page.
+ */
+@utility visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/**
+ * Reverses `visually-hidden` at a breakpoint, for a label that is only visible
+ * when there is room for it. Written as a companion because the two rules have
+ * to travel together to stay correct.
+ */
+@utility visually-hidden-until-* {
+  @media (width >= --value(--breakpoint-*)) {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/**
+ * The drag region of a frameless desktop window.
+ *
+ * Both macOS and Windows need draggable chrome and both need the controls
+ * inside it to opt back out — otherwise a button in the title bar drags the
+ * window instead of pressing. Keeping the pair together keeps the opt-out next
+ * to the opt-in instead of in a platform switch.
+ */
+@utility window-drag {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+@utility window-no-drag {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+/**
+ * Inset the shell clear of the native window controls: the macOS traffic-light
+ * cluster (84px) and the Windows caption overlay (142px).
+ *
+ * Applied to the top bar's inline padding so its content box is what remains,
+ * which is why the search field stays optically centred in the space the user
+ * can actually see rather than in the window.
+ */
+@utility window-inset-macos {
+  padding-inline-start: 84px;
+}
+
+@utility window-inset-windows {
+  padding-inline-end: 142px;
+}
+
+/**
+ * iOS/macOS display-cutout and home-indicator insets, resolved once.
+ *
+ * `--safe-top` is deliberately 0 outside a standalone display: with browser
+ * chrome on screen the user agent's own bar already clears the status bar, so a
+ * non-zero `env()` there paints a dead band above the header.
+ */
+@utility p-safe {
+  padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
+  padding-right: env(safe-area-inset-right, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+}
+
+@utility pb-safe {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/**
+ * Truncate to one line inside a flex child.
+ *
+ * Tailwind's `truncate` is the same declaration; this exists as a named
+ * intent so a reviewer can see that `min-width: 0` — the part that is easy to
+ * forget and that makes the ellipsis actually appear inside a flex row — was
+ * deliberate rather than incidental.
+ */
+@utility text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/**
+ * A fade at the top and bottom edge of a scroll box, so a long list reads as
+ * continuing rather than ending at the fold.
+ */
+@utility scroll-shadow-y {
+  -webkit-mask-image: linear-gradient(
     to bottom,
     transparent 0,
-    #000 var(--scroll-fade-t, 0px),
-    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    #000 2rem,
+    #000 calc(100% - 2rem),
     transparent 100%
   );
-  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
-  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation:
-      scroll-fade-reveal-t 1ms ease-in-out,
-      scroll-fade-reveal-b 1ms ease-in-out;
-    animation-timeline: scroll(self y), scroll(self y);
-    animation-range:
-      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
-      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
-    animation-fill-mode: both;
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-t: var(--_scroll-fade-size-t);
-    --scroll-fade-b: var(--_scroll-fade-size-b);
-  }
-}
-
-@utility scroll-fade-y {
-  --_scroll-fade-size-t: var(
-    --scroll-fade-t-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --_scroll-fade-size-b: var(
-    --scroll-fade-b-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-block: linear-gradient(
+  mask-image: linear-gradient(
     to bottom,
     transparent 0,
-    #000 var(--scroll-fade-t, 0px),
-    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    #000 2rem,
+    #000 calc(100% - 2rem),
     transparent 100%
   );
-  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
-  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation:
-      scroll-fade-reveal-t 1ms ease-in-out,
-      scroll-fade-reveal-b 1ms ease-in-out;
-    animation-timeline: scroll(self y), scroll(self y);
-    animation-range:
-      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
-      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
-    animation-fill-mode: both;
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-t: var(--_scroll-fade-size-t);
-    --scroll-fade-b: var(--_scroll-fade-size-b);
-  }
-}
-
-@utility scroll-fade-x {
-  --_scroll-fade-size-s: var(
-    --scroll-fade-s-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --_scroll-fade-size-e: var(
-    --scroll-fade-e-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-inline: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--scroll-fade-s, 0px),
-    #000 calc(100% - var(--scroll-fade-e, 0px)),
-    transparent 100%
-  );
-  &:where([dir='rtl'], [dir='rtl'] *) {
-    --scroll-fade-inline: linear-gradient(
-      to left,
-      transparent 0,
-      #000 var(--scroll-fade-s, 0px),
-      #000 calc(100% - var(--scroll-fade-e, 0px)),
-      transparent 100%
-    );
-  }
-  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
-  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation:
-      scroll-fade-reveal-s 1ms ease-in-out,
-      scroll-fade-reveal-e 1ms ease-in-out;
-    animation-timeline: scroll(self inline), scroll(self inline);
-    animation-range:
-      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
-      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
-    animation-fill-mode: both;
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-s: var(--_scroll-fade-size-s);
-    --scroll-fade-e: var(--_scroll-fade-size-e);
-  }
-}
-
-@utility scroll-fade-t {
-  --_scroll-fade-size-t: var(
-    --scroll-fade-t-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-mask: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--scroll-fade-t, 0px),
-    #000 100%
-  );
-  -webkit-mask-image: var(--scroll-fade-mask);
-  mask-image: var(--scroll-fade-mask);
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation: scroll-fade-reveal-t 1ms ease-in-out;
-    animation-timeline: scroll(self y);
-    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
-    animation-fill-mode: both;
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-t: var(--_scroll-fade-size-t);
-  }
 }
 
-@utility scroll-fade-b {
-  --_scroll-fade-size-b: var(
-    --scroll-fade-b-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-mask: linear-gradient(
-    to bottom,
-    #000 0,
-    #000 calc(100% - var(--scroll-fade-b, 0px)),
-    transparent 100%
-  );
-  -webkit-mask-image: var(--scroll-fade-mask);
-  mask-image: var(--scroll-fade-mask);
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
+/**
+ * A hairline rule that survives a fractional device pixel ratio. Used for the
+ * rail and panel divides, where a blurry seam is the first thing the eye finds.
+ */
+@utility hairline-x {
+  background-image: linear-gradient(to right, var(--border), var(--border));
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: right center;
+}
 
-  @supports (animation-timeline: scroll()) {
-    animation: scroll-fade-reveal-b 1ms ease-in-out;
-    animation-timeline: scroll(self y);
-    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
-    animation-fill-mode: both;
-  }
+@utility hairline-y {
+  background-image: linear-gradient(to bottom, var(--border), var(--border));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+}
 
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-b: var(--_scroll-fade-size-b);
-  }
+@utility animate-rise {
+  animation: ds-rise var(--duration-slow) var(--ease-out) backwards;
 }
 
-@utility scroll-fade-l {
-  --_scroll-fade-size-s: var(
-    --scroll-fade-s-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-mask: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--scroll-fade-s, 0px),
-    #000 100%
-  );
-  -webkit-mask-image: var(--scroll-fade-mask);
-  mask-image: var(--scroll-fade-mask);
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
+@utility animate-scale-in {
+  animation: ds-scale-in var(--duration-normal) var(--ease-out) backwards;
+}
 
-  @supports (animation-timeline: scroll()) {
-    animation: scroll-fade-reveal-s 1ms ease-in-out;
-    animation-timeline: scroll(self x);
-    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
-    animation-fill-mode: both;
-  }
+@utility animate-indeterminate {
+  animation: ds-indeterminate 1.4s ease-in-out infinite;
+}
 
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-s: var(--_scroll-fade-size-s);
-  }
+@utility animate-caret {
+  animation: ds-caret 1.1s step-end infinite;
 }
 
-@utility scroll-fade-r {
-  --_scroll-fade-size-e: var(
-    --scroll-fade-e-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-mask: linear-gradient(
-    to right,
-    #000 0,
-    #000 calc(100% - var(--scroll-fade-e, 0px)),
+/* A skeleton shimmer that pauses for reduced motion — see the media query at
+   the foot of this file. */
+@utility animate-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in oklch, var(--foreground) 8%, transparent) 50%,
     transparent 100%
   );
-  -webkit-mask-image: var(--scroll-fade-mask);
-  mask-image: var(--scroll-fade-mask);
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation: scroll-fade-reveal-e 1ms ease-in-out;
-    animation-timeline: scroll(self x);
-    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
-    animation-fill-mode: both;
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-e: var(--_scroll-fade-size-e);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: ds-shimmer 1.6s ease-in-out infinite;
+}
+
+/**
+ * A streaming caret: the block that trails the last character of a turn that is
+ * still arriving. It is a caret rather than a spinner because the text is already
+ * readable and growing — the reader wants to know *where* the stream is, not that
+ * something is happening somewhere.
+ *
+ * `inline-block` with a `1ch` width so it sits in the text flow, and the blink is
+ * a step rather than a fade so it reads as a terminal cursor. It is removed under
+ * `prefers-reduced-motion` — the accessibility block below zeroes the duration,
+ * which would leave a static block; the component hides it there instead.
+ */
+@utility streaming-caret {
+  display: inline-block;
+  width: 0.5ch;
+  height: 1em;
+  margin-left: 0.1em;
+  translate: 0 0.1em;
+  background: var(--foreground);
+  animation: ds-caret 1s steps(2, start) infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    display: none;
   }
 }
 
-@utility scroll-fade-s {
-  --_scroll-fade-size-s: var(
-    --scroll-fade-s-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-mask: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--scroll-fade-s, 0px),
-    #000 100%
-  );
-  &:where([dir='rtl'], [dir='rtl'] *) {
-    --scroll-fade-mask: linear-gradient(
-      to left,
-      transparent 0,
-      #000 var(--scroll-fade-s, 0px),
-      #000 100%
-    );
+@keyframes ds-caret {
+  0%,
+  50% {
+    opacity: 1;
   }
-  -webkit-mask-image: var(--scroll-fade-mask);
-  mask-image: var(--scroll-fade-mask);
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation: scroll-fade-reveal-s 1ms ease-in-out;
-    animation-timeline: scroll(self inline);
-    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
-    animation-fill-mode: both;
+  50.01%,
+  100% {
+    opacity: 0;
   }
+}
 
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-s: var(--_scroll-fade-size-s);
-  }
+/* The glass treatment used by the top bar, the rail, and floating overlays.
+   `--glass-*` are private: a consumer chooses *whether* to be glassy through
+   the component prop, not by reaching for these. */
+@utility glass-panel {
+  background: color-mix(in oklch, var(--chrome) calc(var(--chrome-alpha) * 100%), transparent);
+  backdrop-filter: blur(18px) saturate(1.6);
+  -webkit-backdrop-filter: blur(18px) saturate(1.6);
+  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);
 }
 
-@utility scroll-fade-e {
-  --_scroll-fade-size-e: var(
-    --scroll-fade-e-size,
-    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
-  );
-  --scroll-fade-mask: linear-gradient(
-    to right,
-    #000 0,
-    #000 calc(100% - var(--scroll-fade-e, 0px)),
-    transparent 100%
-  );
-  &:where([dir='rtl'], [dir='rtl'] *) {
-    --scroll-fade-mask: linear-gradient(
-      to left,
-      #000 0,
-      #000 calc(100% - var(--scroll-fade-e, 0px)),
-      transparent 100%
-    );
-  }
-  -webkit-mask-image: var(--scroll-fade-mask);
-  mask-image: var(--scroll-fade-mask);
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
+@utility glass-surface {
+  background: color-mix(in oklch, var(--card) 72%, transparent);
+  backdrop-filter: blur(12px) saturate(1.4);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+}
 
-  @supports (animation-timeline: scroll()) {
-    animation: scroll-fade-reveal-e 1ms ease-in-out;
-    animation-timeline: scroll(self inline);
-    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
-    animation-fill-mode: both;
-  }
+/* The focus ring. Applied by components that cannot use the global outline
+   because they need the ring to follow their own radius. */
+@utility focus-ring {
+  transition:
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
 
-  @supports not (animation-timeline: scroll()) {
-    --scroll-fade-e: var(--_scroll-fade-size-e);
+  &:focus-visible {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--primary-subtle);
   }
 }
 
-@utility scroll-fade-* {
-  --scroll-fade-size: calc(var(--spacing) * --value(integer));
-  --scroll-fade-size: --value([length], [percentage]);
+/* --- Scrollbars ----------------------------------------------------------
+ * Themed, thin, and out of the way. A default scrollbar is the single most
+ * obvious "this is a web page" tell in a desktop application: on macOS it is
+ * an overlay that vanishes, but on Windows and Linux it is a 15px chrome bar
+ * with the platform's own palette, which no theme can reach.
+ *
+ * The thumb is `--muted` at rest and `--foreground` on hover, so it is visible
+ * against every surface without a per-theme value, and it never competes with
+ * content for attention.
+ * ------------------------------------------------------------------------ */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
 }
 
-@utility scroll-fade-t-* {
-  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
-  --scroll-fade-t-size: --value([length], [percentage]);
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-@utility scroll-fade-b-* {
-  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
-  --scroll-fade-b-size: --value([length], [percentage]);
+::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 9999px;
+  background: var(--muted);
+  background-clip: content-box;
 }
 
-@utility scroll-fade-s-* {
-  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
-  --scroll-fade-s-size: --value([length], [percentage]);
+::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+  background-clip: content-box;
 }
 
-@utility scroll-fade-e-* {
-  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
-  --scroll-fade-e-size: --value([length], [percentage]);
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
-@utility scroll-fade-none {
-  --scroll-fade-mask: none;
+/* Firefox, which has no ::-webkit-scrollbar. */
+@supports (scrollbar-width: thin) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted) transparent;
+  }
 }
 
-/* shimmer */
-@property --shimmer-angle {
-  syntax: '<angle>';
-  inherits: true;
-  initial-value: 20deg;
-}
-@property --shimmer-image {
-  syntax: '*';
-  inherits: false;
-}
-@property --shimmer-text-fill {
-  syntax: '*';
-  inherits: false;
-}
+/**
+ * An auto-hiding scrollbar, for a horizontal scroller inside a bordered
+ * surface — a code block, a diff, a wide table. The bar appears on hover and
+ * while the region has focus, so the surface reads as continuous code at rest
+ * and the affordance is there the moment a reader needs it.
+ */
+@utility scroll-fade {
+  &::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+  }
 
-@theme inline {
-  @keyframes tw-shimmer {
-    from {
-      background-position: 100% 0;
-    }
-    to {
-      background-position: 0 0;
+  &::-webkit-scrollbar-thumb {
+    border: 0;
+    border-radius: 9999px;
+    background: transparent;
+    transition: background var(--duration-normal) var(--ease-out);
+  }
+
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background: var(--muted-foreground);
+  }
+
+  @supports (scrollbar-width: thin) {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    &:hover,
+    &:focus-within {
+      scrollbar-color: var(--muted-foreground) transparent;
     }
   }
 }
 
-@utility shimmer {
-  --_spread: var(--shimmer-spread, calc(3ch + 40px));
-  --_base: currentColor;
-  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* 0.2)));
+/* --- Base layer ---------------------------------------------------------- */
+@layer base {
+  *,
+  *::before,
+  *::after {
+    border-color: var(--border);
+  }
 
-  background-image: var(
-    --shimmer-image,
-    linear-gradient(
-      calc(90deg + var(--shimmer-angle)),
-      var(--_base) calc(50% - var(--_spread)),
-      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
-      var(--_highlight) 50%,
-      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
-      var(--_base) calc(50% + var(--_spread))
-    )
-  );
-  background-repeat: no-repeat;
-  background-size: calc(200% + var(--_spread) * 2) 100%;
-  background-position: 0 0;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
-  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+  * {
+    /* A ring is drawn outside the box so it can never shift layout. */
+    outline-color: var(--ring);
+    outline-offset: 2px;
+  }
 
-  @variant dark {
-    --_highlight: var(
-      --shimmer-color,
-      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
-    );
+  html {
+    /* From Chromium 140 the viewport propagates overscroll-behavior from the
+       ROOT element, so a `body` declaration is ignored and the macOS
+       rubber-band bounce returns inside a desktop webview. */
+    overscroll-behavior-y: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* The interface default: 14px/1.55, matching the `text-sm` rung. */
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
   }
 
-  &:where([dir='rtl'], [dir='rtl'] *) {
-    animation-direction: reverse;
+  body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    transition:
+      background-color var(--duration-normal) var(--ease-out),
+      color var(--duration-normal) var(--ease-out);
   }
-}
 
-@utility shimmer-once {
-  animation-iteration-count: 1;
-}
+  /* Keyboard focus only. `:focus-visible` rather than `:focus` so a pointer
+     click never paints a ring. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
 
-@utility shimmer-reverse {
-  animation-direction: reverse;
-}
+  ::selection {
+    background: var(--primary-subtle);
+    color: var(--foreground);
+  }
 
-@utility shimmer-none {
-  --shimmer-image: none;
-  --shimmer-text-fill: currentColor;
-}
+  /* Product expectation: every enabled control shows the pointer cursor
+     regardless of Tailwind preflight. */
+  button:not(:disabled),
+  [role='button']:not([aria-disabled='true']),
+  [role='tab']:not([aria-disabled='true']),
+  [role='menuitem']:not([aria-disabled='true']),
+  [role='option']:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
 
-@utility shimmer-color-* {
-  --shimmer-color: --value(--color, [color]);
-  --shimmer-color: color-mix(
-    in oklch,
-    --value(--color, [color]) calc(--modifier(integer) * 1%),
-    transparent
-  );
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  /* Scrollbars. The thumb is `--muted-foreground`, the lightest rung that
+     clears the WCAG 1.4.11 3:1 non-text floor against every surface a scroll
+     box sits on; it darkens to `--foreground` on hover so the affordance
+     reads as live. */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
+    border: 3px solid transparent;
+    border-radius: 9999px;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--muted-foreground) 75%, transparent);
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: 'liga' 0;
+  }
 }
 
-@utility shimmer-duration-* {
-  --shimmer-duration: calc(--value(integer) * 1ms);
+/* --- Accessibility overrides ---------------------------------------------
+ * Kept last so they win the cascade against the rules above.
+ * ------------------------------------------------------------------------ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0s !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
-@utility shimmer-spread-* {
-  --shimmer-spread: calc(var(--spacing) * --value(integer));
-  --shimmer-spread: --value([length], [percentage]);
+@media (prefers-reduced-transparency: reduce) {
+  .glass-panel,
+  .glass-surface {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    background: var(--background) !important;
+  }
 }
 
-@utility shimmer-angle-* {
-  --shimmer-angle: calc(--value(integer) * 1deg);
+@media (prefers-contrast: more) {
+  :root {
+    --border: var(--foreground);
+  }
+
+  .glass-panel,
+  .glass-surface {
+    background: var(--background) !important;
+    border: 1px solid var(--foreground) !important;
+  }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .shimmer {
-    animation: none;
-    background-image: none;
-    -webkit-text-fill-color: currentColor;
+/* An engine without backdrop-filter would render the glass tint alone, which
+   is 3-8% alpha — effectively a transparent panel. Fall back to a solid
+   surface instead, keeping borders and shadows so panels stay delimited. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass-panel,
+  .glass-surface {
+    background: var(--background) !important;
   }
 }