diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 6fe6fce..49ccc2e 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -28,10 +28,20 @@
   }
 </script>
 
+<!--
+  Layout-transition perf fix: previously animated `width` + `min-width` which
+  triggers layout on every frame. Replaced with a CSS-grid track-size
+  transition (`grid-template-columns`) on a wrapping container; the inner
+  flex column lives in the single track. This keeps the parent flex row in
+  charge of width allocation but moves the animated property onto a track
+  spec, which the browser can collapse without re-running our layout work.
+-->
+<div
+  class="grid h-full {collapsed ? 'grid-cols-[48px]' : 'grid-cols-[210px]'}"
+  style="transition: grid-template-columns var(--duration-ui)"
+>
 <aside
-  class="flex flex-col bg-sidebar border-r border-border-subtle h-full overflow-hidden
-    {collapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
-  style="transition: width var(--duration-ui), min-width var(--duration-ui)"
+  class="flex flex-col bg-sidebar border-r border-border-subtle h-full overflow-hidden min-w-0"
 >
   <!-- Logo + toggle -->
   <div class="flex items-center {collapsed ? 'justify-center px-0 pt-4 pb-1' : 'px-5 pt-4 pb-1'} relative">
@@ -165,3 +175,4 @@
     </div>
   {/if}
 </aside>
+</div>
diff --git a/src/lib/components/MorningTriageModal.svelte b/src/lib/components/MorningTriageModal.svelte
index 4e62340..6980123 100644
--- a/src/lib/components/MorningTriageModal.svelte
+++ b/src/lib/components/MorningTriageModal.svelte
@@ -257,9 +257,15 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if open}
+  <!--
+    Pure-black-white taste fix: replaced `bg-black/50` overlay with the brand
+    deep-neutral `#1a1816` at 50% alpha. TODO: promote this colour to a
+    `--color-overlay` token in app.css so the value isn't inlined per-modal.
+  -->
   <div
     bind:this={dialogEl}
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm animate-fade-in"
+    class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm animate-fade-in"
+    style="background: rgba(26, 24, 22, 0.5)"
     role="dialog"
     aria-modal="true"
     aria-labelledby="triage-title"
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index d0bf489..e9c9112 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -15,9 +15,9 @@
   >
     <span
       class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
-        ease-[cubic-bezier(0.34,1.56,0.64,1)]
+        ease-[cubic-bezier(0.16,1,0.3,1)]
         {checked ? 'translate-x-[16px]' : 'translate-x-0'}"
-      style="transition: transform var(--duration-ui) cubic-bezier(0.34, 1.56, 0.64, 1)"
+      style="transition: transform var(--duration-ui) cubic-bezier(0.16, 1, 0.3, 1)"
     ></span>
   </button>
   <div class="flex-1 min-w-0">
diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte
index 044e1a8..1bcad8f 100644
--- a/src/lib/pages/TasksPage.svelte
+++ b/src/lib/pages/TasksPage.svelte
@@ -458,11 +458,20 @@
 
   <!-- Main content: sidebar + tasks -->
   <div class="flex flex-1 min-h-0 px-7 pb-4 gap-3">
+    <!--
+      Layout-transition perf fix: was animating `width` directly. Now wraps
+      the list sidebar in a CSS-grid container whose `grid-template-columns`
+      track-size transitions between collapsed/expanded widths. Same visual
+      effect, single transitioning property the browser can handle as a
+      track-spec change rather than a width re-flow each frame.
+    -->
     <!-- List sidebar -->
     <div
-      class="flex flex-col bg-bg-elevated rounded-2xl border border-border-subtle overflow-hidden
-        {sidebarCollapsed ? 'w-[40px] min-w-[40px]' : 'w-[160px] min-w-[160px]'}"
-      style="transition: width var(--duration-ui)"
+      class="grid {sidebarCollapsed ? 'grid-cols-[40px]' : 'grid-cols-[160px]'}"
+      style="transition: grid-template-columns var(--duration-ui)"
+    >
+    <div
+      class="flex flex-col bg-bg-elevated rounded-2xl border border-border-subtle overflow-hidden min-w-0"
     >
       <!-- Collapse toggle -->
       <button
@@ -561,6 +570,7 @@
         </div>
       {/if}
     </div>
+    </div>
 
     <!-- Task list -->
     <div class="flex-1 overflow-y-auto min-h-0">