feat: enhance tutorial functionality by disabling inputs and buttons during active steps

frontend/e2e/mode_parent/tutorial/tutorial.spec.ts

@@ -377,4 +377,68 @@ test.describe('Tutorial system', () => {
     await page.reload()
     await expect(getTutorialCard(page)).not.toBeVisible({ timeout: 3000 })
   })
+
+  test('add-child FAB is disabled while the create-child tutorial is showing', async ({
+    page,
+    request,
+  }) => {
+    await deleteAllChildren(request)
+    await page.goto('/parent')
+    await expectTutorialCard(page, 'Add your child')
+
+    const fab = page.locator('.fab')
+    await expect(fab).toBeVisible()
+    await expect(fab).toBeDisabled()
+
+    // The page should still be on the children list and the tutorial visible.
+    await expect(page).toHaveURL('/parent')
+    await expect(getTutorialCard(page)).toBeVisible()
+  })
+
+  test('child form inputs are disabled while the edit-child-name tutorial is showing', async ({
+    page,
+  }) => {
+    await page.goto('/parent/children/create')
+    await expect(page).toHaveURL('/parent/children/create')
+    await expectTutorialCard(page, "Child's Name")
+
+    await expect(page.locator('input#name')).toBeDisabled()
+    await expect(page.locator('input#age')).toBeDisabled()
+
+    // The tutorial card should remain visible after checking the inputs.
+    await expect(getTutorialCard(page)).toBeVisible()
+  })
+
+  test('clicking the highlighted Points area does not navigate while child-points tutorial is showing', async ({
+    page,
+    request,
+  }) => {
+    const childName = 'TutorialPointsKid'
+    await ensureChild(request, childName, 7)
+    await page.goto('/parent')
+    await expect(page).toHaveURL('/parent')
+
+    // Wait for the child card to render so the children list has finished
+    // loading before we assert on the Points tutorial.
+    await expect(page.getByText(childName, { exact: true }).first()).toBeVisible({ timeout: 10000 })
+
+    await expectTutorialCard(page, 'Points')
+
+    // Small resilience delay so the spotlight blocker is positioned before the
+    // synthetic click reaches it.
+    await page.waitForTimeout(50)
+
+    const points = page.locator('.card .points').first()
+    await expect(points).toBeVisible()
+    const box = await points.boundingBox()
+    if (!box) throw new Error('Could not resolve points element bounding box')
+
+    // Click the center of the highlighted points area. The tutorial spotlight
+    // blocker should intercept the click, preventing the card click handler
+    // from navigating to the child detail page.
+    await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2)
+
+    await expect(page).toHaveURL('/parent')
+    await expect(getTutorialCard(page)).toBeVisible()
+  })
 })