diff --git a/src/App.tsx b/src/App.tsx
index e10c074..784fe14 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,7 +54,7 @@ function AppShell(props: AppShellProps) {
   return (
     <>
       <main
-        class="grid h-screen min-h-screen overflow-hidden grid-cols-(--app-rail-cols) transition-[grid-template-columns] duration-300 ease-out max-lg:h-auto max-lg:min-h-screen max-lg:grid-cols-1 max-lg:overflow-visible"
+        class="grid h-screen min-h-screen overflow-hidden grid-cols-(--app-rail-cols) max-lg:h-auto max-lg:min-h-screen max-lg:grid-cols-1 max-lg:overflow-visible"
         style={{ "--app-rail-cols": shell.railColumns }}>
         <AppRail />
 
diff --git a/src/components/rail/AppRail.tsx b/src/components/rail/AppRail.tsx
index 8b182b5..97c9efa 100644
--- a/src/components/rail/AppRail.tsx
+++ b/src/components/rail/AppRail.tsx
@@ -229,16 +229,19 @@ function RailThemeMenu(
         aria-expanded={open()}
         aria-haspopup="menu"
         onClick={handleToggle}
-        class="relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
+        class="relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
         classList={{
-          "w-[2.75rem] justify-center": compact(),
-          "w-full justify-start px-3": !compact(),
+          "w-[2.75rem] justify-center gap-0": compact(),
+          "w-full justify-start gap-2.5 px-3": !compact(),
           "bg-surface-container text-primary": open(),
         }}>
         <Icon iconClass={iconClassForTheme(props.currentTheme)} class="shrink-0 text-[1.25rem]" />
-        <Show when={!compact()}>
-          <span class="text-sm font-medium leading-none">Theme</span>
-        </Show>
+        <span
+          class="overflow-hidden whitespace-nowrap text-sm font-medium leading-none transition-[max-width,opacity] duration-200 ease-out motion-reduce:transition-none"
+          classList={{ "max-w-40 opacity-100": !compact(), "max-w-0 opacity-0": compact() }}
+          aria-hidden={compact() ? "true" : undefined}>
+          Theme
+        </span>
       </button>
 
       <Show when={open()}>
@@ -295,7 +298,7 @@ export function AppRail() {
 
   return (
     <aside
-      class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-300 ease-out max-lg:grid max-lg:min-h-0 max-lg:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-lg:items-center max-lg:gap-x-4 max-lg:gap-y-3 max-lg:p-4"
+      class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-220 ease-out motion-reduce:transition-none max-lg:grid max-lg:min-h-0 max-lg:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-lg:items-center max-lg:gap-x-4 max-lg:gap-y-3 max-lg:p-4"
       classList={{
         "items-center px-4": shell.railCondensed && !shell.narrowViewport,
         "gap-5": shell.railCondensed && !shell.narrowViewport,
diff --git a/src/components/rail/AppRailButton.tsx b/src/components/rail/AppRailButton.tsx
index e79e616..f0b8537 100644
--- a/src/components/rail/AppRailButton.tsx
+++ b/src/components/rail/AppRailButton.tsx
@@ -27,9 +27,12 @@ function RailButtonContent(props: RailButtonVisualProps) {
           </Show>
         </Presence>
       </div>
-      <Show when={!props.compact}>
-        <span class="text-sm font-medium leading-none">{props.label}</span>
-      </Show>
+      <span
+        class="overflow-hidden whitespace-nowrap text-sm font-medium leading-none transition-[max-width,opacity] duration-200 ease-out motion-reduce:transition-none"
+        classList={{ "max-w-40 opacity-100": !props.compact, "max-w-0 opacity-0": !!props.compact }}
+        aria-hidden={props.compact ? "true" : undefined}>
+        {props.label}
+      </span>
     </>
   );
 }
@@ -39,10 +42,13 @@ export function RailButton(props: RailButtonProps) {
     <A
       href={props.href}
       end={props.end}
-      class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
+      class={"relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
       activeClass="bg-surface-container text-primary"
       inactiveClass=""
-      classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }}
+      classList={{
+        "w-[2.75rem] justify-center gap-0": !!props.compact,
+        "gap-2.5 px-3": !props.compact,
+      }}
       aria-label={props.label}
       title={props.label}>
       <RailButtonContent {...props} />
@@ -54,8 +60,11 @@ export function RailActionButton(props: RailActionButtonProps) {
   return (
     <button
       type="button"
-      class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
-      classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }}
+      class={"relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
+      classList={{
+        "w-[2.75rem] justify-center gap-0": !!props.compact,
+        "gap-2.5 px-3": !props.compact,
+      }}
       aria-label={props.label}
       title={props.label}
       onClick={() => props.onClick()}>
diff --git a/src/components/rail/tests/AppRailButton.test.tsx b/src/components/rail/tests/AppRailButton.test.tsx
index 3035866..7312975 100644
--- a/src/components/rail/tests/AppRailButton.test.tsx
+++ b/src/components/rail/tests/AppRailButton.test.tsx
@@ -21,7 +21,10 @@ describe("RailButton", () => {
   it("hides label text when compact", () => {
     renderInRouter(() => <RailButton href="/auth" label="Accounts" icon="profile" compact />);
 
-    expect(screen.queryByText("Accounts")).not.toBeInTheDocument();
+    const label = screen.getByText("Accounts");
+    expect(label).toHaveClass("max-w-0");
+    expect(label).toHaveClass("opacity-0");
+    expect(label).toHaveAttribute("aria-hidden", "true");
   });
 
   it("uses rounded-lg (not rounded-full) for reduced rounding", () => {