style: clarify task row states

frontend/e2e/task-row-rhythm.spec.ts

@@ -96,9 +96,55 @@ test('task rows keep approved rhythm without clipping across desktop and mobile'
     await expect(row).toHaveCount(1)
     await expectTaskRowGeometry(row)
   }
+  const ordinaryRow = page.locator('.task-row').filter({ hasText: ordinaryTitle })
   const completedRow = page.locator('.task-row').filter({ hasText: completedTitle })
+  const rowState = async (row: Locator) => row.evaluate((element: HTMLElement) => {
+    const style = getComputedStyle(element)
+    const marker = getComputedStyle(element, '::before')
+    const title = getComputedStyle(element.querySelector('.task-main strong') as HTMLElement)
+    return {
+      background: style.backgroundColor,
+      markerWidth: marker.width,
+      markerBackground: marker.backgroundColor,
+      titleColor: title.color,
+      titleDecoration: title.textDecorationLine,
+    }
+  })
+
+  expect((await rowState(ordinaryRow)).background).toBe('rgba(0, 0, 0, 0)')
+  const hasFinePointer = await page.evaluate(() => matchMedia('(hover:hover) and (pointer:fine)').matches)
+  if (hasFinePointer) {
+    await ordinaryRow.hover()
+    await expect(ordinaryRow).toHaveCSS('background-color', 'rgb(255, 248, 238)')
+  }
+  await ordinaryRow.locator('.task-main').click()
+  await expect(ordinaryRow).toHaveCSS('background-color', 'rgb(255, 244, 229)')
+  const selectedState = await rowState(ordinaryRow)
+  expect(selectedState.markerWidth).toBe('2px')
+  expect(selectedState.markerBackground).toBe('rgb(241, 90, 41)')
+  const ordinaryBox = await ordinaryRow.boundingBox()
+  expect(ordinaryBox).toBeTruthy()
+  await page.mouse.move(ordinaryBox!.x + ordinaryBox!.width / 2, ordinaryBox!.y + ordinaryBox!.height / 2)
+  await page.mouse.down()
+  expect((await rowState(ordinaryRow)).background).toBe('rgb(255, 244, 229)')
+  await page.mouse.up()
+  await ordinaryRow.evaluate(element => element.classList.add('done', 'overdue-task'))
+  expect((await rowState(ordinaryRow)).background).toBe('rgb(255, 244, 229)')
+  await ordinaryRow.evaluate(element => {
+    element.classList.remove('selected', 'done', 'overdue-task')
+    element.classList.add('task-row--trash')
+  })
+  await ordinaryRow.hover()
+  const trashState = await rowState(ordinaryRow)
+  expect(trashState.background).toBe('rgba(0, 0, 0, 0)')
+  expect(trashState.markerBackground).toBe('rgba(0, 0, 0, 0)')
+
   await completedRow.getByRole('button', { name: `完成${completedTitle}` }).click()
   await expect(completedRow).toHaveClass(/done/)
+  await expect(completedRow).toHaveCSS('background-color', 'rgb(251, 247, 240)')
+  await expect(completedRow.locator('.task-main strong')).toHaveCSS('color', 'rgb(112, 104, 95)')
+  const completedState = await rowState(completedRow)
+  expect(completedState.titleDecoration).toContain('line-through')
   await expectTaskRowGeometry(completedRow)
   await expect(page.locator('.task-row').filter({ hasText: dueTitle }).locator('.task-tail')).toBeVisible()
   await expect(page.locator('.task-row').filter({ hasText: parentTitle })).toContainText('0/1')

frontend/src/visual-polish.test.ts

@@ -153,8 +153,14 @@ describe('approved five-detail polish', () => {
     }
   })
 
-  it('keeps plain-list task and habit rows transparent in all persistent states', () => {
-    expect(css).toContain('.plain-list>.task-row:hover,.plain-list>.task-row.selected,.plain-list>.task-row.done,.plain-list>.habit-row:hover,.plain-list>.habit-row.done,.plain-list>.overdue-task{background:transparent}')
+  it('gives task rows distinct hover, selected, completed, and overdue feedback while habits stay quiet', () => {
+    expect(css).toContain('@media(hover:hover) and (pointer:fine){.plain-list>.task-row:not(.task-row--trash):hover{background:#fff8ee}}')
+    expect(css).toContain('@media(hover:hover) and (pointer:fine){.task-row:hover:not(.reordering):not(.task-row--trash){transform:translate(calc(var(--swipe-x) + 2px),var(--reorder-y,0px))}}')
+    expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).selected,.plain-list>.task-row:not(.task-row--trash).selected.done,.plain-list>.task-row:not(.task-row--trash).selected.overdue-task{background:#fff4e5}')
+    expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).selected::before{background:var(--accent)}')
+    expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).done{background:#fbf7f0}')
+    expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).overdue-task{background:#fff7f4}')
+    expect(css).toContain('.plain-list>.habit-row:hover,.plain-list>.habit-row.done{background:transparent}')
   })
 
   it('renders memo rows with title and time only at a fixed compact height', () => {