Add per-task timers with milestone audio for ADHD-friendly time awareness

Every task now has a duration (10 min default) and a child-initiated start:
a play icon on the kiosk, alongside the checkbox, begins a server-anchored
countdown for that specific task. Deliberately not a beep-every-minute
alarm -- audio is milestone-only (start/halfway/almost-done/time's-up),
since frequent interrupting alerts can backfire for ADHD kids rather than
help. Countdown is drift-free (recomputed each tick from the fixed
started_at anchor, never decremented), audio is synthesized client-side
via Web Audio (zero external assets, matching this app's existing
hand-rolled-PNG-icon philosophy), and the child's own start tap is what
unlocks audio playback for the rest of the session on iOS.

Two real bugs caught and fixed during design, before they shipped:
- Marking a task done now clears started_at (both the kiosk and parent
  routes) -- without this, unchecking a finished task later would
  resurrect a stale timer and instantly show "time's up" on a task the
  child hasn't touched today.
- The parent editor's poll-pause guard only covered contenteditable
  fields; a plain number input for duration would have been silently
  unprotected from being clobbered by an incoming 4s poll mid-edit.
  Extended the guard to cover it, verified live that the DOM and focus
  both survive a poll while the field is focused.

Schema: calendar_tasks gains duration_minutes (NOT NULL DEFAULT 10) and
started_at (nullable). Verified against a simulated copy of the real
production schema/data that the static DEFAULT backfills every existing
row automatically (no business-logic backfill needed, unlike is_admin),
and that repeated boots stay idempotent. Duplicate-calendar carries
durations forward but always resets started_at, verified end-to-end.

Kiosk countdown/milestone-firing verified live in-browser end-to-end: real
timer start, halfway/almost-done/done firing at the correct proportional
thresholds (not fixed minutes, so it scales from ~1min to 20+min tasks),
and a mid-countdown page reload resuming at the correct remaining time
with already-passed milestones backfilled silently rather than replayed.

public/js/calendarRender.js

@@ -20,6 +20,10 @@ function renderCalendar({ calendar, editable, weekdayBoard, weekendWrap, handler
   const currentLabels = {};
   calendar.blocks.forEach((b) => { currentLabels[b.key] = b.label; });
 
+  // Kiosk-only: tasks with a running timer, for kiosk.js's tick loop to
+  // update in place every 250ms without a full re-render.
+  const activeTimers = [];
+
   function syncLabel(key, sourceEl) {
     document.querySelectorAll(`.label[data-block="${key}"]`).forEach((el) => {
       if (el !== sourceEl) el.textContent = sourceEl.textContent;
@@ -49,15 +53,48 @@ function renderCalendar({ calendar, editable, weekdayBoard, weekendWrap, handler
     row.appendChild(cb);
     row.appendChild(span);
 
+    let startBtn = null;
     if (!editable) {
       // Kiosk mode: the 24px checkbox alone is a poor touch target, so the
-      // whole row toggles it. Skip when the tap landed on the checkbox
-      // itself — it already handles its own toggle+change natively.
+      // whole row toggles it. Skip when the tap landed on the checkbox or
+      // the start-timer button — those handle themselves.
       row.addEventListener('click', (e) => {
-        if (e.target === cb) return;
+        if (e.target === cb || e.target === startBtn) return;
         cb.checked = !cb.checked;
         cb.dispatchEvent(new Event('change'));
       });
+
+      if (!task.done) {
+        startBtn = document.createElement('button');
+        startBtn.className = 'timer-start';
+        startBtn.textContent = '▶';
+        startBtn.setAttribute('aria-label', 'Start timer');
+        startBtn.onclick = () => handlers.onStartTimer(task.id);
+        row.appendChild(startBtn);
+      }
+
+      if (task.startedAt && !task.done) {
+        const timer = document.createElement('div');
+        timer.className = 'task-timer';
+        const track = document.createElement('div');
+        track.className = 'timer-track';
+        const fill = document.createElement('div');
+        fill.className = 'timer-fill';
+        track.appendChild(fill);
+        const label = document.createElement('span');
+        label.className = 'timer-label';
+        timer.appendChild(track);
+        timer.appendChild(label);
+        row.appendChild(timer);
+
+        activeTimers.push({
+          taskId: task.id,
+          startedAt: task.startedAt,
+          durationMinutes: task.durationMinutes,
+          fillEl: fill,
+          labelEl: label,
+        });
+      }
     }
 
     if (editable) {
@@ -73,6 +110,22 @@ function renderCalendar({ calendar, editable, weekdayBoard, weekendWrap, handler
         if (!span.textContent.trim()) span.textContent = task.text;
       });
 
+      const durationInput = document.createElement('input');
+      durationInput.type = 'number';
+      durationInput.className = 'duration-input';
+      durationInput.min = '1';
+      durationInput.max = '180';
+      durationInput.value = task.durationMinutes;
+      durationInput.title = 'Minutes';
+      const debouncedDuration = debounce(() => {
+        const value = parseInt(durationInput.value, 10);
+        if (Number.isInteger(value) && value >= 1 && value <= 180) {
+          handlers.onDurationEdit(task.id, value);
+        }
+      }, 500);
+      durationInput.addEventListener('input', debouncedDuration);
+      row.appendChild(durationInput);
+
       const del = document.createElement('button');
       del.className = 'del';
       del.textContent = '✕';
@@ -161,7 +214,7 @@ function renderCalendar({ calendar, editable, weekdayBoard, weekendWrap, handler
   WEEKDAYS.forEach((d) => weekdayBoard.appendChild(makeDayCard(d)));
   WEEKEND.forEach((d) => weekendWrap.appendChild(makeDayCard(d)));
 
-  return { currentLabels };
+  return { currentLabels, activeTimers };
 }
 
 function renderLegend(legendEl, calendar) {