Makisuo · Oct 30, 2026 · Oct 30, 2026 · Oct 30, 2026
diff --git a/apps/web/src/page/dashboards/view/picker.ts b/apps/web/src/page/dashboards/view/picker.ts
@@ -34,7 +34,7 @@ const pickerCard = (h: H, title: string, description: string, onClick: Message,
 			h.Type("button"),
 			h.OnClick(onClick),
 			h.Class(
-				"group ring-1 ring-border hover:ring-border-active bg-background p-4 text-left transition-all flex flex-col gap-3 rounded-md",
+				"group ring-1 ring-border hover:ring-foreground/30 bg-background p-4 text-left transition-all flex flex-col gap-3 rounded-md",
 			),
 		],
 		[
@@ -43,7 +43,7 @@ const pickerCard = (h: H, title: string, description: string, onClick: Message,
 				[h.Class("flex flex-col gap-0.5")],
 				[
 					h.div([h.Class("text-xs font-medium")], [title]),
-					...(description === "" ? [] : [h.div([h.Class("text-2xs text-dim")], [description])]),
+					...(description === "" ? [] : [h.div([h.Class("text-2xs text-muted-foreground")], [description])]),
 				],
 			),
 		],
@@ -54,7 +54,7 @@ const pickerSection = (h: H, title: string, showHeading: boolean, cards: Readonl
 	h.div(
 		[h.Class("flex flex-col gap-3")],
 		[
-			...(showHeading ? [eyebrow(h, { as: "h3", className: "text-dim" }, [title])] : []),
+			...(showHeading ? [eyebrow(h, { as: "h3" }, [title])] : []),
 			h.div([h.Class("grid grid-cols-3 gap-3")], cards),
 		],
 	)

diff --git a/apps/web/src/page/overview/view-health.ts b/apps/web/src/page/overview/view-health.ts
@@ -28,7 +28,6 @@ import {
 } from "./derive"
 import type { HealthSnapshot, Incident, Model } from "./model"
 import { alertFiringHero } from "./view-hero"
-import { OVERVIEW_RAIL_CLASS } from "./view-usage"
 import { statRail, statRailItem, statRailLoading } from "../kit/stat-rail"
 
 // The service health overview: the alerts banner and
@@ -119,7 +118,7 @@ export const healthOverview = <M>(h: HtmlBuilder<M>, { model, slice, nowMs }: He
 		onEmpty: () =>
 			section(h, "mb-4 space-y-3", false, [
 				...banner,
-				statRailLoading(h, 4, undefined, OVERVIEW_RAIL_CLASS),
+				statRailLoading(h, 4),
 			]),
 		// An empty section keeps no margin, or the page strip's gap above the usage rail doubles.
 		onFailure: () => section(h, banner.length > 0 ? "mb-4 space-y-3" : "space-y-3", false, banner),
@@ -136,7 +135,7 @@ export const healthOverview = <M>(h: HtmlBuilder<M>, { model, slice, nowMs }: He
 				counts[health] > 0 ? active : "neutral"
 			return section(h, "mb-4 space-y-3", AsyncData.isRefreshing(data), [
 				...banner,
-				statRail(h, { className: OVERVIEW_RAIL_CLASS }, [
+				statRail(h, {}, [
 					statRailItem(h, {
 						eyebrow: "Services",
 						value: String(snapshot.length),

diff --git a/apps/web/src/page/overview/view-metrics.ts b/apps/web/src/page/overview/view-metrics.ts
@@ -314,7 +314,7 @@ const cardContent = (
 			// one-line caption in the strip's failure class, centred in the plot area. No axis, no data.
 			if (pageFailureKeys.split(FAILURE_KEY_SEPARATOR).includes(failureKey(cardFailure)))
 				return h.div(
-					[h.Class("flex h-full flex-col px-6 pb-6")],
+					[h.Class("flex h-full flex-col px-4 pb-4")],
 					[
 						h.span(
 							[

diff --git a/apps/web/src/page/overview/view-usage.ts b/apps/web/src/page/overview/view-usage.ts
@@ -9,9 +9,8 @@ import { statRail, statRailItem, statRailLoading } from "../kit/stat-rail"
 
 // The service usage cards.
 
-/** Overview rails share the chart cards' corner radius and their 24px inner inset. */
-export const OVERVIEW_RAIL_CLASS = "rounded-2xl"
-const OVERVIEW_TILE_CLASS = "px-6"
+/** Overview tiles share the chart cards' 16px inner inset. */
+const OVERVIEW_TILE_CLASS = "px-4"
 
 const CARDS: ReadonlyArray<{ title: string; key: keyof UsageTotals; format: (value: number) => string }> = [
 	{ title: "Total Logs", key: "logs", format: formatNumber },
@@ -27,11 +26,11 @@ export const usageCards = <M>(
 	isExplained: (failure: LoadFailure) => boolean,
 ): Html =>
 	AsyncData.matchData(model.usage.data, {
-		onEmpty: () => statRailLoading(h, CARDS.length, 3, OVERVIEW_RAIL_CLASS),
+		onEmpty: () => statRailLoading(h, CARDS.length, 3),
 		onFailure: (failure) =>
 			statRail(
 				h,
-				{ columns: 3, className: OVERVIEW_RAIL_CLASS },
+				{ columns: 3 },
 				CARDS.map((card) =>
 					statRailItem(h, {
 						eyebrow: card.title,
@@ -49,7 +48,7 @@ export const usageCards = <M>(
 		onData: ({ totals, previous }) =>
 			statRail(
 				h,
-				{ columns: 3, className: OVERVIEW_RAIL_CLASS },
+				{ columns: 3 },
 				CARDS.map((card) =>
 					statRailItem(h, {
 						eyebrow: card.title,

diff --git a/apps/web/src/service-map/map/node-card.ts b/apps/web/src/service-map/map/node-card.ts
@@ -58,7 +58,7 @@ export const HEALTH_TONE = { crit: "crit", warn: "warn", neutral: "ok" } satisfi
 const SELECTED_BORDER_CLASS = {
 	crit: "border-severity-error ring-[3px] ring-severity-error/15",
 	warn: "border-severity-warn ring-[3px] ring-severity-warn/15",
-	neutral: "border-border-active ring-[3px] ring-foreground/15",
+	neutral: "border-foreground/40 ring-[3px] ring-foreground/15",
 } satisfies Record<ErrorRateLevel, string>
 
 export const selectedBorderClass = (errorRate: number): string =>

diff --git a/apps/web/src/service-map/map/nodes.ts b/apps/web/src/service-map/map/nodes.ts
@@ -103,7 +103,7 @@ const serviceNode = <M>(h: HtmlBuilder<M>, id: string, data: ServiceNodeData): R
 						"flex w-[220px] cursor-pointer overflow-hidden rounded-r-lg border bg-card transition-[border-color,box-shadow] duration-150",
 						selected
 							? selectedBorderClass(errorRate)
-							: "border-border hover:border-border-active",
+							: "border-border hover:border-foreground/30",
 					),
 				),
 			],

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
@@ -711,13 +711,6 @@ width = its duration */
 	}
 }
 
-/* Trace timeline bar hover: CSS-only, no re-render */
-.trace-timeline-bar:hover {
-	background-color: var(--hover-bg) !important;
-	box-shadow: inset 0 0 0 1px oklch(0.5 0.05 0 / 0.15);
-	z-index: 5;
-}
-
 /* Infra honeycomb — flat severity tiles.
    Maple is a flat system: no shadows, no gradients, no glow. Each cell points
    `--tone` at a severity token and fills flat. Per the design system, inactive

diff --git a/apps/web/src/ui/card.ts b/apps/web/src/ui/card.ts
@@ -9,7 +9,7 @@ import {
 } from "@maple/ui/styles/ui/card"
 import type { Attribute, Html, HtmlBuilder } from "foldkit/html"
 
-// Port of packages/ui/src/components/ui/card.tsx: the raised rounded-2xl surface and its parts.
+// The Card surface (styles in packages/ui/src/components/ui/card.styles.ts): rounded-md, and its parts.
 
 type Children = ReadonlyArray<Html | string>
 

diff --git a/packages/ui/src/components/ui/card.styles.ts b/packages/ui/src/components/ui/card.styles.ts
@@ -1,8 +1,8 @@
 export const cardStyles =
-	"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]"
+	"relative flex flex-col rounded-md border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]"
 
 export const cardHeaderStyles =
-	"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"
+	"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-4 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-3 has-data-[slot=card-action]:grid-cols-[1fr_auto]"
 
 export const cardTitleStyles = "font-semibold text-lg leading-none"
 
@@ -11,7 +11,7 @@ export const cardDescriptionStyles = "text-muted-foreground text-sm"
 export const cardActionStyles = "col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end"
 
 export const cardPanelStyles =
-	"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0"
+	"flex-1 p-4 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0"
 
 export const cardFooterStyles =
-	"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4"
+	"flex items-center p-4 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-3"
diff --git a/packages/ui/src/components/ui/combobox.styles.ts b/packages/ui/src/components/ui/combobox.styles.ts
@@ -9,7 +9,7 @@ export const comboboxInputGroupStyles =
 	"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64"
 
 export const comboboxStartAddonStyles =
-	"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5"
+	"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:-mx-0.5"
 
 export const comboboxInputStartAddonStyles =
 	"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]"
@@ -23,10 +23,10 @@ export const comboboxInputDefaultStyles =
 export const comboboxInputControlStyles = "has-disabled:opacity-100"
 
 export const comboboxTriggerStyles =
-	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const comboboxClearStyles =
-	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const comboboxTriggerSmStyles = "end-0"
 
@@ -45,7 +45,7 @@ export const comboboxPopupStyles =
 	"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground"
 
 export const comboboxItemStyles =
-	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const comboboxItemIndicatorStyles = "col-start-1"
 
@@ -68,7 +68,7 @@ export const comboboxChipsStyles =
 	"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]"
 
 export const comboboxChipsStartAddonStyles =
-	"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
+	"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
 
 // A translucent foreground tint rather than `bg-accent`: in this theme
 // --accent, --muted and --secondary are all the same value as the

diff --git a/packages/ui/src/components/ui/select.styles.ts b/packages/ui/src/components/ui/select.styles.ts
@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority"
 
 export const selectTriggerVariants = cva(
-	"relative inline-flex min-h-9 min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
+	"relative inline-flex min-h-9 min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
 	{
 		defaultVariants: {
 			size: "default",
@@ -16,7 +16,7 @@ export const selectTriggerVariants = cva(
 	},
 )
 
-export const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4"
+export const selectTriggerIconClassName = "-me-1 size-4 opacity-80 sm:size-3.5"
 
 export const selectButtonValueStyles = "flex-1 truncate in-data-placeholder:text-muted-foreground/72"
 
@@ -44,11 +44,11 @@ export const selectScrollDownArrowStyles =
 	"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover"
 
 export const selectItemStyles =
-	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const selectItemIndicatorStyles = "col-start-1"
 
-export const selectItemIndicatorIconStyles = "size-4"
+export const selectItemIndicatorIconStyles = "size-4 sm:size-3.5"
 
 export const selectItemTextStyles = "col-start-2 min-w-0"
 

diff --git a/packages/ui/src/components/ui/tabs.styles.ts b/packages/ui/src/components/ui/tabs.styles.ts
@@ -19,6 +19,6 @@ export const tabsIndicatorUnderlineStyles =
 export const tabsIndicatorDefaultStyles = "-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input"
 
 export const tabsTabStyles =
-	"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0"
+	"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0"
 
 export const tabsPanelStyles = "flex-1 outline-none"