sheer-ui 0.0.0

package/src/lib/assets/ui.css

@@ -0,0 +1,733 @@
+/* Native <details> disclosures (accordion + collapsible): the content slot is a grid
+   whose single row interpolates 0fr↔1fr — works in every engine, unlike ::details-content
+   (Firefox 143+) or interpolate-size height 0↔auto (Chromium-only). data-state carries the
+   visual state; the components hold the `open` attribute through the closing transition so
+   content stays rendered, then drop it when animations settle (JS times the unmount, CSS
+   owns the motion). @starting-style animates the enter from the just-mounted 0fr state. */
+[data-slot='collapsible'] > [data-slot='collapsible-content'],
+[data-slot='accordion-item'] > [data-slot='accordion-content'] {
+	display: grid;
+	grid-template-rows: 0fr;
+	overflow: clip;
+	transition: grid-template-rows var(--tw-duration, 200ms) var(--tw-ease, ease-out);
+}
+
+[data-slot='collapsible'][data-state='open'] > [data-slot='collapsible-content'],
+[data-slot='accordion-item'][data-state='open'] > [data-slot='accordion-content'] {
+	grid-template-rows: 1fr;
+
+	@starting-style {
+		grid-template-rows: 0fr;
+	}
+}
+
+/* Each content slot wraps its children in a single element; min-height 0 lets the 0fr
+   track actually collapse it. */
+[data-slot='collapsible-content'] > *,
+[data-slot='accordion-content'] > * {
+	min-height: 0;
+}
+
+/* scrollbar-none covers only scrollbar-width; the webkit pseudo is still needed for Safari < 18.2. */
+/* Popup surfaces (menu family content and sub-content, select/combobox content) stay mounted
+   through their exit; the engine sets the closed state inline and these utilities add the
+   motion. Closed is visibility:hidden, not display:none: Firefox cannot transition `display` at
+   all (BCD css.properties.display.is_transitionable — Chrome 117, Safari 18, Firefox never), so a
+   discrete display exit snaps there, while visibility transitions discretely in every engine and
+   stays visible until the exit ends. The entry slide is transition-only as well: closed gives
+   `translate` a zero duration and a full-length delay, so it jumps to its side offset only once
+   the surface is hidden, and open transitions it back to zero — enter slides, exit does not, as
+   before. Visibility itself transitions only on the way out: the entry flips it instantly,
+   because a hidden→visible transition is still hidden at its first frame (WebKit: for half of
+   it) and the focus scope's opening focus() lands exactly there.
+   Duration lists live under the state selectors on purpose: an adapter's `duration-*` class sets
+   a single transition-duration that would override a list at utility specificity, while the
+   attribute selectors still read its --tw-duration. */
+@utility popup-surface {
+	--popup-duration: var(--tw-duration, var(--default-transition-duration));
+	transition-property: opacity, scale, translate, visibility;
+	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+
+	&[data-state='open'] {
+		transition-duration: var(--popup-duration), var(--popup-duration), var(--popup-duration), 0s;
+	}
+	&[data-state='closed'] {
+		visibility: hidden;
+		opacity: 0;
+		scale: 0.95;
+		transition-duration: var(--popup-duration), var(--popup-duration), 0s, var(--popup-duration);
+		transition-delay: 0s, 0s, var(--popup-duration), 0s;
+	}
+	&[data-state='closed'][data-side='bottom'] {
+		translate: 0 -0.5rem;
+	}
+	&[data-state='closed'][data-side='top'] {
+		translate: 0 0.5rem;
+	}
+	&[data-state='closed'][data-side='left'],
+	&[data-state='closed'][data-side='inline-start'] {
+		translate: 0.5rem 0;
+	}
+	&[data-state='closed'][data-side='right'],
+	&[data-state='closed'][data-side='inline-end'] {
+		translate: -0.5rem 0;
+	}
+}
+
+/* Static (in-flow) content must leave the flow when closed, so the engine sets display:none
+   there; transitioning it discretely lets the exit play where display is transitionable. */
+@utility popup-surface-static {
+	transition-property: opacity, scale, translate, visibility, display;
+	transition-behavior: allow-discrete;
+
+	&[data-state='open'] {
+		transition-duration: var(--popup-duration), var(--popup-duration), var(--popup-duration), 0s, 0s;
+	}
+	&[data-state='closed'] {
+		transition-duration: var(--popup-duration), var(--popup-duration), 0s, var(--popup-duration), var(--popup-duration);
+		transition-delay: 0s, 0s, var(--popup-duration), 0s, 0s;
+	}
+}
+
+/* Navigation menu surfaces, same always-mounted contract as popup-surface. Content enters are
+   keyframes, because they are asymmetric with the exit: every enter fades in, and a swap also
+   slides in from the previous item's side, while an exit fades and slides only on a swap
+   (data-motion=to-*) or in the viewport-less layout (the adapter's data-closed classes). Only
+   those two exits hold visibility: inside a viewport a plain close hides the content at once and
+   lets the viewport zoom out on its own, as the unmount did. */
+@keyframes nav-content-in {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nav-content-in-from-start {
+	from {
+		opacity: 0;
+		translate: -13rem 0;
+	}
+}
+@keyframes nav-content-in-from-end {
+	from {
+		opacity: 0;
+		translate: 13rem 0;
+	}
+}
+@utility nav-content-surface {
+	--nav-duration: var(--tw-duration, var(--default-transition-duration));
+	--nav-ease: var(--tw-ease, var(--default-transition-timing-function));
+	transition-property: opacity, scale, translate, visibility;
+	transition-timing-function: var(--nav-ease);
+
+	&[data-state='open'] {
+		transition-duration: var(--nav-duration), var(--nav-duration), var(--nav-duration), 0s;
+		animation: nav-content-in var(--nav-duration) var(--nav-ease);
+	}
+	&[data-state='open'][data-motion='from-start'] {
+		animation-name: nav-content-in-from-start;
+	}
+	&[data-state='open'][data-motion='from-end'] {
+		animation-name: nav-content-in-from-end;
+	}
+	&[data-state='closed'] {
+		visibility: hidden;
+		transition-duration: var(--nav-duration), var(--nav-duration), var(--nav-duration), 0s;
+	}
+	&[data-state='closed']:is([data-motion='to-start'], [data-motion='to-end']),
+	[data-viewport='false'] &[data-state='closed'] {
+		transition-duration: var(--nav-duration);
+	}
+	&[data-motion='to-start'],
+	&[data-motion='to-end'] {
+		opacity: 0;
+	}
+	&[data-motion='to-start'] {
+		translate: -13rem 0;
+	}
+	&[data-motion='to-end'] {
+		translate: 13rem 0;
+	}
+}
+@utility nav-viewport-surface {
+	--nav-duration: var(--tw-duration, var(--default-transition-duration));
+	transition-property: scale, visibility;
+	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+
+	&[data-state='open'] {
+		transition-duration: var(--nav-duration), 0s;
+	}
+	&[data-state='closed'] {
+		visibility: hidden;
+		scale: 0.9;
+		transition-duration: var(--nav-duration);
+	}
+}
+@utility nav-indicator-surface {
+	--nav-duration: var(--tw-duration, var(--default-transition-duration));
+	transition-property: opacity, visibility;
+	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+
+	&[data-state='visible'] {
+		transition-duration: var(--nav-duration), 0s;
+	}
+	&[data-state='hidden'] {
+		visibility: hidden;
+		opacity: 0;
+		transition-duration: var(--nav-duration);
+	}
+}
+
+/* A JS-overlay backdrop that stays mounted: fades, and holds visibility through the fade-out. */
+@utility overlay-surface {
+	--overlay-duration: var(--tw-duration, var(--default-transition-duration));
+	transition-property: opacity, visibility;
+	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+
+	&[data-state='open'] {
+		transition-duration: var(--overlay-duration), 0s;
+	}
+	&[data-state='closed'] {
+		visibility: hidden;
+		opacity: 0;
+		transition-duration: var(--overlay-duration);
+	}
+}
+
+/* Text-selection guard. A drag that starts inside an open modal surface must not select the page
+   text behind it. This was a document pointer tracker (text-selection-layer) that set body
+   user-select:none for the length of an outward drag and kept a global layer stack to decide
+   which surface owned the drag; now the open surface flags itself and :has() covers its whole
+   open window instead — page text is unreachable then anyway (the scroll lock's pointer-events:
+   none on body). Descendants with their own user-select (select-none items) keep it. Safari
+   only reads the -webkit- form. */
+body:has([data-text-selection-guard]) {
+	-webkit-user-select: none;
+	user-select: none;
+}
+[data-text-selection-guard] {
+	-webkit-user-select: text;
+	user-select: text;
+}
+
+@utility scrollbar-hidden {
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+@theme inline {
+	--text-2xs: 11px;
+	--text-3xs: 10px;
+	--animate-check-pop: check-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	@keyframes check-pop {
+		from {
+			opacity: 0;
+			transform: scale(0.6);
+		}
+	}
+
+	--animate-caret-blink: caret-blink 1.25s ease-out infinite;
+
+	@keyframes caret-blink {
+		0%,
+		70%,
+		100% {
+			opacity: 1;
+		}
+		20%,
+		50% {
+			opacity: 0;
+		}
+	}
+}
+
+/* Component animations — defined centrally; components only trigger them via animation-name. */
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* The exit keyframes keep `visibility: visible` while they run: the drawer and its overlay stay
+   mounted with visibility:hidden inline once closed, and a running animation outranks inline
+   style, so the surface hides exactly when its exit ends (vaul writes inline `transition`
+   shorthands while dragging, which a visibility transition would not survive). */
+@keyframes fadeOut {
+	from {
+		visibility: visible;
+	}
+	to {
+		opacity: 0;
+		visibility: visible;
+	}
+}
+
+/* Draws an SVG stroke from invisible to full length — pair with pathLength="100" + [stroke-dasharray:100] [stroke-dashoffset:100]. */
+@keyframes draw {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes slideFromBottom {
+	from {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToBottom {
+	from {
+		visibility: visible;
+	}
+	to {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+		visibility: visible;
+	}
+}
+
+@keyframes slideFromTop {
+	from {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToTop {
+	from {
+		visibility: visible;
+	}
+	to {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+		visibility: visible;
+	}
+}
+
+@keyframes slideFromLeft {
+	from {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToLeft {
+	from {
+		visibility: visible;
+	}
+	to {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+		visibility: visible;
+	}
+}
+
+@keyframes slideFromRight {
+	from {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToRight {
+	from {
+		visibility: visible;
+	}
+	to {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+		visibility: visible;
+	}
+}
+
+@keyframes swipe-out-left {
+	from {
+		transform: var(--y) translateX(var(--swipe-amount-x));
+		opacity: 1;
+	}
+	to {
+		transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
+		opacity: 0;
+	}
+}
+
+@keyframes swipe-out-right {
+	from {
+		transform: var(--y) translateX(var(--swipe-amount-x));
+		opacity: 1;
+	}
+	to {
+		transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
+		opacity: 0;
+	}
+}
+
+@keyframes swipe-out-up {
+	from {
+		transform: var(--y) translateY(var(--swipe-amount-y));
+		opacity: 1;
+	}
+	to {
+		transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
+		opacity: 0;
+	}
+}
+
+@keyframes swipe-out-down {
+	from {
+		transform: var(--y) translateY(var(--swipe-amount-y));
+		opacity: 1;
+	}
+	to {
+		transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
+		opacity: 0;
+	}
+}
+
+@keyframes sonner-fade-in {
+	0% {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes theme-spin-out {
+	0% {
+		opacity: 1;
+		transform: rotate(0deg);
+	}
+	50%,
+	100% {
+		opacity: 0;
+		transform: rotate(180deg);
+	}
+}
+
+@keyframes theme-spin-in {
+	0%,
+	50% {
+		opacity: 0;
+		transform: rotate(180deg);
+	}
+	100% {
+		opacity: 1;
+		transform: rotate(360deg);
+	}
+}
+
+/* Class-based dark mode, defined once for every consumer stylesheet. :where keeps dark: at the
+   utility's own specificity, so a same-specificity state utility (aria-expanded:, hover:) is not
+   outranked merely by being in dark mode. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Custom variants: one spelling per data-state value. These shadow Tailwind's built-in
+   data-open/data-closed/... (which match a bare [data-open] attribute nothing here renders).
+   data-disabled and data-active keep the ="false" guard: Toast, sidebar menu buttons and
+   pagination render the attribute as a boolean string. */
+@custom-variant data-open {
+	&:where([data-state='open']) {
+		@slot;
+	}
+}
+
+@custom-variant data-closed {
+	&:where([data-state='closed']) {
+		@slot;
+	}
+}
+
+@custom-variant data-checked {
+	&:where([data-state='checked']) {
+		@slot;
+	}
+}
+
+@custom-variant data-unchecked {
+	&:where([data-state='unchecked']) {
+		@slot;
+	}
+}
+
+@custom-variant data-disabled {
+	&:where([data-disabled]:not([data-disabled='false'])) {
+		@slot;
+	}
+}
+
+@custom-variant data-active {
+	&:where([data-state='active']),
+	&:where([data-active]:not([data-active='false'])) {
+		@slot;
+	}
+}
+
+@custom-variant data-horizontal {
+	&:where([data-orientation='horizontal']) {
+		@slot;
+	}
+}
+
+@custom-variant data-vertical {
+	&:where([data-orientation='vertical']) {
+		@slot;
+	}
+}
+
+.label-selectable-card {
+	@apply gap-2 rounded-2xl border leading-snug group-data-disabled/field:opacity-50 has-data-checked:bg-border/30 *:data-[slot=field]:p-4;
+}
+
+.wrap-input-identity {
+	@apply relative flex h-9 w-full min-w-0 items-center rounded-md border border-border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-border/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
+}
+
+/* Anchored JS surfaces (menu family, select/combobox): the engine positions the content itself
+   with position-area + position-try-fallbacks (internal/floating-layer). The content must keep
+   its intrinsic width for the fallback check to see an overflow — an absolutely positioned box
+   would otherwise shrink to the space beside a viewport edge and wrap instead of flipping.
+   Layered so a consumer's width utility still wins. */
+@layer components {
+	[data-floating-content] {
+		width: max-content;
+	}
+}
+
+/* The last-resort position options for [data-floating-content]: when no side fits the whole
+   content, each side is re-tried with its block size capped to the side's space (minus the
+   engine's own margins), so the surface scrolls inside instead of overflowing the viewport. */
+@position-try --bits-clamped {
+	max-block-size: calc(100% - var(--bits-floating-block-margins, 0px));
+}
+
+/* Native overlay anchor positioning — single source for the popover, tooltip, and
+   link-preview content surfaces. Tag the content element with `data-anchored`; side/align
+   come from `data-side` / `data-align`. Replaces the per-component <style> blocks that
+   each duplicated this. Tailwind has no anchor-positioning utilities, so this is raw CSS.
+
+   The whole block sits behind @supports: engines without anchor positioning (~18% 2026-07)
+   keep the UA popover default (fixed, inset 0, auto margins → centered on screen) instead of
+   an inset:auto mispositioned surface. TODO(widen): explicit anchor-name on the trigger +
+   position-anchor here would extend anchoring to Chrome 125–136, which lack the
+   showPopover({source}) implicit anchor (137+); needs per-instance names plumbed through the
+   trigger prop bags. */
+@supports (anchor-name: --a) {
+	[data-anchored] {
+		position: fixed;
+		inset: auto;
+		margin: 0;
+		overflow: visible;
+
+		/* default (no data-side): above the trigger, centered */
+		bottom: anchor(top);
+		justify-self: anchor-center;
+		margin-bottom: 0.5rem;
+		position-try-fallbacks: flip-block;
+	}
+
+	[data-anchored][data-side='bottom'] {
+		bottom: auto;
+		top: anchor(bottom);
+		margin: 0.5rem 0 0;
+	}
+	[data-anchored][data-side='left'] {
+		bottom: auto;
+		right: anchor(left);
+		left: auto;
+		top: anchor(center);
+		justify-self: initial;
+		margin: 0 0.5rem 0 0;
+	}
+	[data-anchored][data-side='right'] {
+		bottom: auto;
+		left: anchor(right);
+		top: anchor(center);
+		justify-self: initial;
+		margin: 0 0 0 0.5rem;
+	}
+
+	[data-anchored][data-align='start'] {
+		justify-self: initial;
+		left: anchor(left);
+	}
+	[data-anchored][data-align='end'] {
+		justify-self: initial;
+		left: auto;
+		right: anchor(right);
+	}
+}
+
+/* An exiting anchored surface (still shown while its [data-state=closed] fade runs, hidden by
+   the deferred hidePopover) must not catch the pointer. Shared here, not restated per surface. */
+[data-anchored][data-state='closed'] {
+	pointer-events: none;
+}
+
+/* Reserve the scrollbar gutter permanently (92% 2026-07): overlays that lock body scroll no
+   longer shift the layout, and body-scroll-lock's measurement branch becomes the fallback
+   for engines without support (Safari <18.2). Unlayered on purpose — wins over app resets. */
+html {
+	scrollbar-gutter: stable;
+}
+
+/* Native modal surface — single source for the modal <dialog> adapters (Dialog.Content,
+   Sheet.Content). The skeleton (dialog/components/modal-surface.svelte) tags the element
+   with `data-modal-surface`. Replaces the per-adapter <style> copies of these rules. */
+
+/* A closed <dialog> must stay hidden + non-interactive. Any display utility on the element
+   (Sheet's variant puts `flex` there) overrides the UA `dialog:not([open]){display:none}`,
+   so re-assert it unlayered (wins over layered Tailwind utilities). */
+[data-modal-surface]:not([open]) {
+	display: none;
+}
+
+/* ::backdrop replaces the JS-rendered overlay <div> (was `bg-black/50`). Keyframe fade, not an
+   @starting-style / overlay / display transition — WebKit doesn't start those on top-layer
+   changes, which snapped the fade on iOS, and `overlay` is Chromium-only. The exit fade plays on
+   data-[state=closed] while the controller holds the dialog open, so it now runs in every engine
+   (it was Chromium-only before). Adapters match the fade to their own motion via
+   `--modal-backdrop-duration`. */
+@keyframes modal-backdrop-fade-in {
+	from {
+		background-color: rgb(0 0 0 / 0);
+	}
+}
+@keyframes modal-backdrop-fade-out {
+	to {
+		background-color: rgb(0 0 0 / 0);
+	}
+}
+[data-modal-surface]::backdrop {
+	background-color: rgb(0 0 0 / 0.5);
+}
+[data-modal-surface][open][data-state='open']::backdrop {
+	animation: modal-backdrop-fade-in var(--modal-backdrop-duration, 200ms) ease;
+}
+[data-modal-surface][open][data-state='closed']::backdrop {
+	animation: modal-backdrop-fade-out var(--modal-backdrop-duration, 200ms) ease forwards;
+}
+
+/* LayerChart defaults for [data-slot=chart] — the static .lc-* overrides that shadcn-svelte
+   ships as ~30 arbitrary-variant classes on every chart-container instance. Kept here once
+   instead; new overrides from upstream chart pulls land in this block, not the container. */
+[data-slot='chart'] .lc-root-container {
+	@apply w-full;
+}
+
+/* Stroke around dots/marks when hovering */
+[data-slot='chart'] .lc-highlight-point {
+	@apply stroke-transparent opacity-100;
+}
+
+/* Default stroke color of lines */
+[data-slot='chart'] .lc-line {
+	@apply stroke-border/50;
+}
+
+/* Hide the line intersecting the point when hovering */
+[data-slot='chart'] .lc-highlight-line {
+	@apply stroke-0 opacity-100;
+}
+
+/* Hovering a point on a stacked series chart drops the opacity of the other series;
+   keep them fully visible */
+[data-slot='chart'] .lc-area-path {
+	@apply opacity-100;
+}
+
+[data-slot='chart'] .lc-text {
+	@apply text-xs;
+}
+[data-slot='chart'] .lc-text-svg {
+	@apply overflow-visible;
+}
+
+/* No tick lines between the axis labels and the chart (saves disabling `tickMarks`
+   on the x/y axis of every chart) */
+[data-slot='chart'] .lc-axis-tick {
+	@apply stroke-0;
+}
+
+/* No rule on the x/y axis: a grid line is already there and the rule renders after
+   the marks, overlapping them */
+[data-slot='chart'] .lc-rule-x-line:not(.lc-grid-x-rule),
+[data-slot='chart'] .lc-rule-y-line:not(.lc-grid-y-rule) {
+	@apply stroke-0;
+}
+
+[data-slot='chart'] .lc-grid-x-radial-line,
+[data-slot='chart'] .lc-grid-x-radial-circle,
+[data-slot='chart'] .lc-grid-y-radial-line,
+[data-slot='chart'] .lc-grid-y-radial-circle {
+	@apply stroke-border;
+}
+
+/* Legend */
+[data-slot='chart'] .lc-legend-swatch-button {
+	@apply items-center gap-1.5;
+}
+[data-slot='chart'] .lc-legend-swatch-group {
+	@apply items-center gap-4;
+}
+[data-slot='chart'] .lc-legend-swatch {
+	@apply size-2.5 rounded-xs;
+}
+
+/* Labels */
+[data-slot='chart'] .lc-labels-text:not([fill]) {
+	@apply fill-foreground;
+}
+[data-slot='chart'] text {
+	@apply stroke-transparent;
+}
+
+/* Tick labels on the x/y axes */
+[data-slot='chart'] .lc-axis-tick-label {
+	@apply fill-muted-foreground font-normal;
+}
+
+[data-slot='chart'] .lc-tooltip-rects-g,
+[data-slot='chart'] .lc-layout-svg-g {
+	@apply fill-transparent;
+}
+
+/* Carousel edge treatment: a slide crossing the scroller's clip edge fades out/in instead of
+   hard-cutting its border at the corner. Scroll-driven (compositor, no JS); opacity only —
+   a transform here would skew the rect-based snap-offset measurements in carousel.svelte.
+   Engines without view() timelines keep the plain hard clip. Firefox: not shipped as of 2026-08
+   (flag: layout.css.scroll-driven-animations.enabled) — recheck ~mid-2027. */
+@supports (animation-timeline: view()) {
+	[data-slot='carousel-content'] > [data-slot='carousel-item'] {
+		animation: carousel-edge-fade linear both;
+		animation-timeline: view(inline);
+	}
+	[data-slot='carousel-content'][data-orientation='vertical'] > [data-slot='carousel-item'] {
+		animation-timeline: view(block);
+	}
+}
+@keyframes carousel-edge-fade {
+	entry 0% {
+		opacity: 0.2;
+	}
+	entry 100% {
+		opacity: 1;
+	}
+	exit 0% {
+		opacity: 1;
+	}
+	exit 100% {
+		opacity: 0.2;
+	}
+}