diff --git a/packages/dashboard/app/components/TodoView.css b/packages/dashboard/app/components/TodoView.css
index bcebdae69b..bb6baddbf9 100644
--- a/packages/dashboard/app/components/TodoView.css
+++ b/packages/dashboard/app/components/TodoView.css
@@ -462,24 +462,25 @@ Redesign Todos to fit the rest of the dashboard theme: full-height tokenized wor
   gap: var(--space-sm);
 }
 
+/*
+FNXC:TodosStyling 2026-07-12-00:00:
+FN-7870 removes the active-row left accent stripe and per-row border boxing so Todo sidebar list rows read as a flat, quiet stack. Active and hover states remain visible through background and text color only.
+*/
 .todo-list-item {
   min-height: 42px;
   padding: var(--space-sm);
-  border: 1px solid transparent;
   border-radius: var(--radius-md);
   color: var(--text-muted);
 }
 
 .todo-list-item:hover {
   background: var(--card-hover);
-  border-color: color-mix(in srgb, var(--border) 70%, transparent);
+  color: var(--text);
 }
 
 .todo-list-item--active {
   background: color-mix(in srgb, var(--todo) 10%, var(--surface));
-  border-color: color-mix(in srgb, var(--todo) 32%, var(--border));
   color: var(--text);
-  box-shadow: inset 3px 0 0 var(--todo);
 }
 
 .todo-list-select-btn {
diff --git a/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts b/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
index cbcd892435..26d80a3786 100644
--- a/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
+++ b/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest";
 import { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
 
+const selectorBlocks = (css: string, selectorFragment: string): string[] =>
+  Array.from(css.matchAll(/[^{}]*\{[^{}]*\}/g), ([block]) => block).filter((block) => block.includes(selectorFragment));
+
 describe("TodoView mobile stack height CSS contract", () => {
   it("uncaps both visible panels in the narrow single-panel stack", () => {
     const css = loadAllAppCss();
@@ -45,3 +48,19 @@ describe("TodoView action row CSS contract", () => {
     expect(css).toMatch(/@media \(max-width:\s*768px\)[^{]*\{[\s\S]*\.todo-item-actions\s*\{[^}]*opacity:\s*1;[^}]*\}/);
   });
 });
+
+describe("TodoView list row CSS contract", () => {
+  it("keeps sidebar list rows flat without a left accent stripe", () => {
+    const css = loadAllAppCss();
+    const listItemBlocks = selectorBlocks(css, ".todo-list-item");
+    const activeBlocks = selectorBlocks(css, ".todo-list-item--active");
+
+    expect(listItemBlocks.length).toBeGreaterThan(0);
+    expect(activeBlocks.length).toBeGreaterThan(0);
+    expect(activeBlocks.join("\n")).not.toMatch(/inset\s+3px\s+0\s+0/);
+    expect(listItemBlocks.join("\n")).not.toMatch(/border-left\s*:/);
+    expect(css).not.toMatch(/\.todo-list-item\s*\{[^}]*border\s*:/);
+    expect(css).not.toMatch(/\.todo-list-item:hover\s*\{[^}]*border-color\s*:/);
+    expect(activeBlocks.join("\n")).toMatch(/background\s*:/);
+  });
+});