From 08beb0421700e1800c887197d2ad031adef032a4 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 14:51:28 -0700
Subject: [PATCH 01/13] fix(debates): keep playback running when the tab is
 backgrounded (GEO-2947)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching to another window took a debate silent, and it stayed silent
until the card was clicked. Nothing in the player listens for blur or
visibilitychange, so the pause was not a decision we made — it was the
sync step reacting to one the browser made for us.

A backgrounded tab is where a browser stops a <video> it considers
silent. With two elements and only the speaking one audible, that stops
the listening debater's element and leaves the speaker's running. The
sync step read that split as "the browser stopped playback on us",
paused the half that was still playing, and recorded it as a *user*
pause — which is why auto-resume stood down and only a click brought it
back. Dropping `playing` also dropped `audible`, so both elements
re-muted on the way out.

Off screen, the pair is now left alone: neither the drift correction nor
the play/pause reconciliation runs while the document is hidden, so the
audio the viewer is listening to keeps going. On the way back, a pair the
browser did stop is restarted through `resumeBoth`, which re-seeks slot 2
to slot 1 first — so it resumes in step from where playback actually got
to, with no reset of the playhead and no change to the mute preference.

Visibility, not focus: a tab sitting on screen beside the window being
typed in never had a reason to stop. Scrolling a card out of the viewport
is a separate condition and still pauses, unchanged.
---
 .../core/debates/use-debate-playback.test.tsx | 158 +++++++++++++++++-
 apps/web/core/debates/use-debate-playback.ts  |  90 +++++++++-
 2 files changed, 242 insertions(+), 6 deletions(-)

diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index 7dc637351e..536f3279e8 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -1,7 +1,9 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { Debate } from './api';
+import { useDebatePlayback } from './use-debate-playback';
 
 const mocks = vi.hoisted(() => ({ recordingUrl: vi.fn() }));
 
@@ -12,8 +14,6 @@ vi.mock('./hooks', () => ({
   useDebateTranscript: () => ({ data: { segments: [] }, isLoading: false, error: null }),
 }));
 
-import { useDebatePlayback } from './use-debate-playback';
-
 function debateFixture(id = 'debate-1'): Debate {
   return {
     id,
@@ -146,8 +146,20 @@ function fakeVideo() {
       video.pending.resolve();
       video.pending = null;
     },
+    /**
+     * The browser stopping the element of its own accord — a backgrounded tab pausing a video
+     * it considers silent. Distinct from pause(): nothing of ours asked for it, and there is no
+     * in-flight play() to interrupt, so the element simply stops.
+     */
+    browserPause() {
+      video.paused = true;
+    },
+  };
+  return video as unknown as HTMLVideoElement & {
+    settlePlay: () => void;
+    rejectPlay: () => void;
+    browserPause: () => void;
   };
-  return video as unknown as HTMLVideoElement & { settlePlay: () => void; rejectPlay: () => void };
 }
 
 describe('useDebatePlayback — an interrupted resume must not report failure (GEO-2895)', () => {
@@ -255,3 +267,141 @@ describe('useDebatePlayback — an interrupted resume must not report failure (G
     expect(result.current.error).toBeNull();
   });
 });
+
+/**
+ * GEO-2947. A debate the viewer is listening to has to survive them clicking into another
+ * window. Nothing in the player pauses on blur or on hide — but a backgrounded tab is where a
+ * browser stops a silent <video> of its own accord, and the sync step used to read that split
+ * pair as "the browser stopped playback on us": it paused the half that was still playing (the
+ * audio being listened to) and recorded a *user* pause, which auto-resume then refuses to undo.
+ * Switching windows went silent and stayed silent until the card was clicked.
+ */
+describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)', () => {
+  let visibilityState: DocumentVisibilityState;
+
+  beforeEach(() => {
+    visibilityState = 'visible';
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState);
+    mocks.recordingUrl.mockReset();
+    mocks.recordingUrl.mockImplementation(({ filename }: { filename: string }) =>
+      Promise.resolve({ url: `https://cdn.test/${filename}?sig=abc` })
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /** Mounted, both elements attached, and actually playing — the state a viewer leaves behind. */
+  async function playing() {
+    const { result } = renderHook(() => useDebatePlayback(debateFixture(), true));
+    await waitFor(() => expect(result.current.urls.slot1).not.toBeNull());
+    const slot1 = fakeVideo();
+    const slot2 = fakeVideo();
+    result.current.slot1VideoRef.current = slot1;
+    result.current.slot2VideoRef.current = slot2;
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(result.current.playing).toBe(true);
+    return { result, slot1, slot2 };
+  }
+
+  const setVisibility = (next: DocumentVisibilityState) => {
+    visibilityState = next;
+    document.dispatchEvent(new Event('visibilitychange'));
+  };
+
+  /** THE REGRESSION: the audible half must keep running, and it must not become a user pause. */
+  it('leaves the still-playing video alone when the hidden tab splits the pair', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    // What the browser does to a silent background <video>: it stops, with no pause() of ours.
+    slot2.browserPause();
+
+    act(() => result.current.onPlaybackTick());
+
+    expect(slot1.paused).toBe(false); // the audio the viewer is listening to keeps playing
+    expect(result.current.playing).toBe(true);
+    expect(result.current.userPaused).toBe(false); // nothing to click past on return
+  });
+
+  /**
+   * The control, and the behaviour GEO-2783 added: on screen, a split pair really does mean the
+   * browser refused us (a blocked unmuted speaker), and the viewer needs the controls back.
+   */
+  it('still pauses both and surfaces the pause when the split happens on screen', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    slot2.browserPause(); // visibilityState stays 'visible'
+
+    act(() => result.current.onPlaybackTick());
+
+    expect(slot1.paused).toBe(true);
+    expect(result.current.playing).toBe(false);
+    expect(result.current.userPaused).toBe(true);
+  });
+
+  it('restarts a pair the browser paused in the background when the tab comes back', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause();
+    slot2.browserPause();
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.paused).toBe(false);
+    expect(slot2.paused).toBe(false);
+    expect(result.current.playing).toBe(true);
+    expect(result.current.error).toBeNull();
+  });
+
+  /** Returning must not restart a debate the viewer had deliberately paused before leaving. */
+  it('leaves a debate the viewer paused alone on return', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    act(() => result.current.togglePlayback()); // the viewer pauses
+    expect(result.current.userPaused).toBe(true);
+
+    visibilityState = 'hidden';
+    await act(async () => {
+      setVisibility('visible');
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.paused).toBe(true);
+    expect(slot2.paused).toBe(true);
+    expect(result.current.playing).toBe(false);
+  });
+
+  /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
+  it('does not touch a pair that kept playing while the tab was hidden', async () => {
+    const { result, slot1, slot2 } = await playing();
+    slot1.currentTime = 12;
+    slot2.currentTime = 12;
+
+    visibilityState = 'hidden';
+    await act(async () => {
+      setVisibility('visible');
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBe(12);
+    expect(slot2.currentTime).toBe(12);
+    expect(result.current.playing).toBe(true);
+  });
+});
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index d9a8366cbb..eda75c2093 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -48,6 +48,24 @@ const STALL_AFTER_MS = 500;
 /** Progress smaller than this is float noise on `currentTime`, not playback. */
 const STALL_EPSILON_SECONDS = 0.001;
 
+/**
+ * Is this tab off screen?
+ *
+ * Playback deliberately does *not* stop when the window loses focus or the tab is backgrounded
+ * (GEO-2947) — a debate someone is listening to should keep running while they work in another
+ * window, the way a background YouTube tab does. Scrolling the card out of the viewport is a
+ * separate condition and still pauses; that lives in `suspend`.
+ *
+ * What this gate is for is the browser pausing us. A backgrounded tab is where the two elements
+ * can end up in different play states through nobody's decision, and the corrections below —
+ * written for a foreground pair that has drifted — do the wrong thing there. So they stand down
+ * while hidden, and the pair is reconciled on the way back instead.
+ *
+ * Visibility, not focus: `document.hasFocus()` is false for every window but the frontmost one,
+ * including a tab sitting fully on screen beside the one being typed in.
+ */
+const documentIsHidden = () => typeof document !== 'undefined' && document.visibilityState === 'hidden';
+
 /**
  * Drives the two synchronized debater recordings for a single debate: loads the
  * per-slot playback URLs, keeps the videos in lockstep, tracks the active turn
@@ -263,6 +281,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // kept for a gap too large to close that way.
     const syncDelta = offsets.slot2 - offsets.slot1;
     const now = Date.now();
+    const hidden = documentIsHidden();
 
     if (primaryVideo) {
       const progress = primaryProgressRef.current;
@@ -280,7 +299,14 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       primaryVideo.readyState < HTMLMediaElement.HAVE_FUTURE_DATA ||
       (primaryProgressRef.current !== null && now - primaryProgressRef.current.at > STALL_AFTER_MS);
 
-    if (primaryVideo && secondaryVideo && !primaryVideo.paused && !secondaryVideo.seeking && !primaryStalled) {
+    if (
+      primaryVideo &&
+      secondaryVideo &&
+      !hidden &&
+      !primaryVideo.paused &&
+      !secondaryVideo.seeking &&
+      !primaryStalled
+    ) {
       const drift = secondaryVideo.currentTime - (primaryVideo.currentTime - syncDelta);
       const absDrift = Math.abs(drift);
 
@@ -303,7 +329,21 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // Keep both videos in the same play/pause state. If the browser pauses one
     // on its own (e.g. it blocks the unmuted speaker under autoplay policy),
     // pause the other too so audio and video can never drift apart.
-    if (primaryVideo && secondaryVideo && primaryVideo.paused !== secondaryVideo.paused && playhead < timelineSeconds) {
+    //
+    // Not while the tab is hidden, though (GEO-2947). Backgrounding splits the pair without
+    // anyone deciding to: a browser that stops a silent <video> off screen stops the listening
+    // debater's element and leaves the speaking one running. Reading that as "the browser
+    // stopped playback on us" pauses the half that was still playing — the audio the viewer was
+    // listening to — and records it as a *user* pause, which auto-resume then refuses to undo.
+    // That is the reported bug: switch windows and the debate goes silent until you click it.
+    // A hidden tab is reconciled on return instead; see the visibilitychange effect below.
+    if (
+      primaryVideo &&
+      secondaryVideo &&
+      !hidden &&
+      primaryVideo.paused !== secondaryVideo.paused &&
+      playhead < timelineSeconds
+    ) {
       const stillPlaying = primaryVideo.paused ? secondaryVideo : primaryVideo;
       stillPlaying.pause();
       // The browser stopped playback on us — surface it as a paused state so the
@@ -410,6 +450,52 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     void resumeBoth();
   }, [pauseBoth, playFromStart, playbackEnded, playing, resumeBoth]);
 
+  /**
+   * Come back from a backgrounded tab in the state the viewer left (GEO-2947).
+   *
+   * Nothing here pauses on blur or on hide. But the browser can still pause an element while the
+   * tab is off screen, and the sync step above stands down rather than reacting to it, so a tab
+   * that has been away may come back with one or both videos paused while this hook still
+   * believes playback is running. Reconcile that on the return instead of leaving the card frozen
+   * with no controls showing — `playing` is true, so the feed's autoplay effect (`!playing`)
+   * would never retry it.
+   *
+   * `resumeBoth` is the right instrument: it re-seeks slot 2 to slot 1's position first, so the
+   * pair comes back in step from wherever playback actually got to rather than from where it was
+   * when the tab was hidden. Nothing resets the playhead and nothing touches the mute preference.
+   *
+   * Only when the viewer had it playing: an explicit pause, a finished debate or a scrub in
+   * progress all mean "leave it alone", which is what `backgroundIntentRef` carries.
+   */
+  const backgroundIntentRef = React.useRef<{ shouldBePlaying: boolean; resumeBoth: () => Promise<void> }>({
+    shouldBePlaying: false,
+    resumeBoth,
+  });
+  React.useEffect(() => {
+    backgroundIntentRef.current = {
+      shouldBePlaying: playing && !userPaused && !isScrubbing && !playbackEnded,
+      resumeBoth,
+    };
+  });
+
+  React.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const reconcile = () => {
+      if (document.visibilityState !== 'visible') return;
+      const { shouldBePlaying, resumeBoth: resume } = backgroundIntentRef.current;
+      if (!shouldBePlaying) return;
+      const primaryVideo = slot1VideoRef.current;
+      const secondaryVideo = slot2VideoRef.current;
+      if (!primaryVideo || !secondaryVideo) return;
+      // Both still running — the tab was backgrounded and the browser let it be. Nothing to do,
+      // and calling resumeBoth here would seek a pair that is already in step.
+      if (!primaryVideo.paused && !secondaryVideo.paused) return;
+      void resume();
+    };
+    document.addEventListener('visibilitychange', reconcile);
+    return () => document.removeEventListener('visibilitychange', reconcile);
+  }, []);
+
   // Autoplay control for the feed: when a debate scrolls out of view we pause it
   // silently (without flipping userPaused, so it can auto-resume when back in view).
   const suspend = React.useCallback(() => {

From 80f827a41bb137dea1d98a629f3701eee039f0ba Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 15:16:41 -0700
Subject: [PATCH 02/13] fix(debates): close the two holes review found in the
 background-playback fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both were the same mistake as the original bug, relocated.

The split-pair guard stood down while hidden, but the tab is visible again
by the time the return path resumes — and a resume *is* a split pair for
as long as it takes to confirm, with slot 2 (a cue-less WebM) routinely
the later of the two. Slot 1 emits timeupdate about four times a second
throughout, so a tick landed in that window as a matter of course and
paused the video that had just started, sticky. A resume in flight now
counts as "not settled", alongside a hidden tab, and both corrections read
the one predicate.

The turn was still nulled when slot 1 was found paused. Off screen that is
usually the browser stopping slot 1 — which is the muted element for all
of slot 2's turn — and a null turn drops `audible`, which re-mutes slot 2
while it is still playing. The same silence, through the back door. Whose
turn it is now comes off the playhead unless the pair is settled.

Per-turn audio moves from the `muted` flag to `volume`. It stops the
listening debater's element looking like a silent video to a backgrounded
tab, and it leaves `muted` meaning only the viewer's own mute — which is
already the only thing `playFromStart` and the autoplay fallback write it
for, so the element no longer carries two notions of "muted" written from
two places.

Also recorded, rather than fixed: a pause made from outside the page (a
media key) while the tab is hidden is indistinguishable from the browser's
own, so it is resumed too.
---
 .../browse/debate-feed-player.test.tsx        | 124 ++++++++++++++++++
 .../debates/browse/debate-feed-player.tsx     |  25 +++-
 .../core/debates/use-debate-playback.test.tsx |  55 ++++++++
 apps/web/core/debates/use-debate-playback.ts  |  65 ++++++++-
 4 files changed, 262 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/core/debates/browse/debate-feed-player.test.tsx

diff --git a/apps/web/core/debates/browse/debate-feed-player.test.tsx b/apps/web/core/debates/browse/debate-feed-player.test.tsx
new file mode 100644
index 0000000000..7aa5a54320
--- /dev/null
+++ b/apps/web/core/debates/browse/debate-feed-player.test.tsx
@@ -0,0 +1,124 @@
+import { render } from '@testing-library/react';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { Debate, DebateParticipant } from '~/core/debates/api';
+import type { DebateVotesResult } from '~/core/debates/use-debate-votes';
+
+import { DebateFeedPlayer } from './debate-feed-player';
+
+const mocks = vi.hoisted(() => ({ controller: null as unknown }));
+
+vi.mock('~/core/debates/use-debate-playback', () => ({
+  useDebatePlayback: () => mocks.controller,
+}));
+
+vi.mock('~/core/debates/use-playback-analytics', () => ({
+  usePlaybackAnalytics: () => ({ elementRef: { current: null }, control: vi.fn() }),
+}));
+
+vi.mock('~/core/hooks/use-entity-side-panel', () => ({
+  useEntitySidePanel: () => ({ openSidePanel: vi.fn(), closeSidePanel: vi.fn(), sidePanelTarget: null }),
+}));
+
+vi.mock('~/core/hooks/use-space', () => ({
+  useSpace: () => ({ space: null }),
+}));
+
+const participant = (slot: 1 | 2): DebateParticipant =>
+  ({
+    participant_slot: slot,
+    profile_space_id: `space-${slot}`,
+    position_label: slot === 1 ? 'For' : 'Against',
+  }) as unknown as DebateParticipant;
+
+const votes: DebateVotesResult = {
+  sharePercentFor: () => null,
+  isMyPick: () => false,
+  hasVoted: false,
+  isVoting: false,
+  castVote: async () => {},
+};
+
+/**
+ * A controller in the one state that matters here: playing, with a turn in progress, both
+ * recordings loaded. `mutedByUser` and `turnState` are what the audio gating reads.
+ */
+function controllerFixture(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 }) {
+  return {
+    slot1VideoRef: { current: null },
+    slot2VideoRef: { current: null },
+    slot1Participant: participant(1),
+    slot2Participant: participant(2),
+    urls: { slot1: 'https://cdn.test/slot1.webm', slot2: 'https://cdn.test/slot2.webm' },
+    ready: true,
+    error: null,
+    playing: true,
+    userPaused: false,
+    isScrubbing: false,
+    playbackEnded: false,
+    mutedByUser: overrides.mutedByUser,
+    setMutedByUser: vi.fn(),
+    playheadSeconds: 5,
+    timelineSeconds: 60,
+    turnState: { slot: overrides.turnSlot, seconds: 10, progress: 0.5 },
+    activeSlot: overrides.turnSlot,
+    subtitle: null,
+    onPlaybackTick: vi.fn(),
+    togglePlayback: vi.fn(),
+    playFromStart: vi.fn(),
+    resumeBoth: vi.fn(),
+    suspend: vi.fn(),
+    seekBoth: vi.fn(),
+    beginScrub: vi.fn(),
+    endScrub: vi.fn(),
+  };
+}
+
+function renderPlayer(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 }) {
+  mocks.controller = controllerFixture(overrides);
+  const { container } = render(
+    <DebateFeedPlayer debate={{ id: 'debate-1' } as unknown as Debate} active votes={votes} />
+  );
+  const [slot1, slot2] = Array.from(container.querySelectorAll('video'));
+  return { slot1, slot2 };
+}
+
+/**
+ * Per-turn audio is gated with `volume`, not `muted` (GEO-2947): `muted` carries only the
+ * viewer's own mute — the same thing `playFromStart` and the autoplay fallback write it for — so
+ * the element no longer has two notions of "muted" written to it from two places. It also stops
+ * the listening debater's element from looking like a silent video to a backgrounded tab.
+ */
+describe('DebateFeedPlayer audio gating (GEO-2947)', () => {
+  beforeEach(() => {
+    mocks.controller = null;
+  });
+
+  it('un-mutes both elements once the viewer un-mutes, and gives the turn to the speaker', () => {
+    const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 1 });
+
+    expect(slot1.muted).toBe(false);
+    expect(slot2.muted).toBe(false); // not muted — merely silent, so a hidden tab keeps it running
+    expect(slot1.volume).toBe(1);
+    expect(slot2.volume).toBe(0);
+  });
+
+  it('moves the volume with the turn', () => {
+    const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 2 });
+
+    expect(slot1.volume).toBe(0);
+    expect(slot2.volume).toBe(1);
+  });
+
+  it("honours the viewer's mute on both elements", () => {
+    const { slot1, slot2 } = renderPlayer({ mutedByUser: true, turnSlot: 1 });
+
+    expect(slot1.muted).toBe(true);
+    expect(slot2.muted).toBe(true);
+    // The turn still moves the volume underneath — `muted` is what silences it, and un-muting
+    // therefore lands the viewer on the speaker rather than on both recordings at once.
+    expect(slot1.volume).toBe(1);
+    expect(slot2.volume).toBe(0);
+  });
+});
diff --git a/apps/web/core/debates/browse/debate-feed-player.tsx b/apps/web/core/debates/browse/debate-feed-player.tsx
index 077215b8d0..c333630f22 100644
--- a/apps/web/core/debates/browse/debate-feed-player.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.tsx
@@ -222,6 +222,29 @@ function DebaterVideo({
   const { openSidePanel } = useEntitySidePanel();
   const name = participant ? speakerLabel(participant) : 'Debater';
 
+  /**
+   * Whose turn it is decides the *volume*, not the `muted` flag (GEO-2947).
+   *
+   * `muted` now carries only the viewer's own mute, which is the one thing it should mean — and
+   * the one thing `playFromStart` and `playBothWithMutedFallback` already write it for, so the
+   * element no longer has two different notions of "muted" written to it from two places.
+   *
+   * The reason to move the per-turn gate off it: a browser is entitled to stop a <video> it
+   * considers silent once the tab is off screen, and muting the listening debater for the length
+   * of a turn is what made one of the pair look silent. Volume 0 is the same silence to a
+   * listener without being a mute. It is not a guarantee — a browser may well count volume 0 as
+   * inaudible too — but it costs nothing, and the player no longer depends on the answer either
+   * way: `useDebatePlayback` now leaves a split pair alone off screen and reconciles on return.
+   *
+   * Layout effect, so the volume lands in the same commit that React writes `muted` — a turn
+   * change must never leave both recordings briefly audible at once.
+   */
+  React.useLayoutEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.volume = audible ? 1 : 0;
+  }, [audible, src, videoRef]);
+
   // A personal space's own id resolves to its "system entity" (an ugly technical
   // record). The space's page entity is the real profile, so open that once it's
   // loaded and fall back to the space id while it's still fetching.
@@ -244,7 +267,7 @@ function DebaterVideo({
             playsInline
             preload="metadata"
             src={src}
-            muted={!audible || mutedByUser}
+            muted={mutedByUser}
             onEnded={onPlaybackTick}
             onLoadedMetadata={onPlaybackTick}
             onPause={onPlaybackTick}
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index 536f3279e8..8734633c66 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -388,6 +388,61 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(result.current.playing).toBe(false);
   });
 
+  /**
+   * The turn is what un-mutes the speaking video, so nulling it is a mute. Off screen the
+   * browser stops whichever element is silent — during slot 2's turn that is slot 1, the one the
+   * playhead is read from. Reading "slot 1 is paused" as "there is no turn" therefore silenced
+   * slot 2 while it was still playing: the same silence the ticket is about, by another route.
+   */
+  it('keeps the turn when the hidden tab stops the clock video but not the speaking one', async () => {
+    const { result, slot1 } = await playing();
+
+    // Far enough in to be slot 2's turn (30s each), so slot 1 is the muted element.
+    act(() => result.current.seekBoth(40));
+    await waitFor(() => expect(result.current.turnState?.slot).toBe(2));
+
+    visibilityState = 'hidden';
+    slot1.browserPause();
+
+    act(() => result.current.onPlaybackTick());
+
+    expect(result.current.turnState?.slot).toBe(2); // slot 2 stays audible
+    expect(result.current.playing).toBe(true);
+  });
+
+  /**
+   * The return path must not re-create the bug it fixes. `resumeBoth` starts both elements and
+   * then spends up to ~300ms confirming, and slot 2 (a cue-less WebM) routinely starts later —
+   * so the pair is legitimately split while the tab is already visible again. Slot 1 emits
+   * `timeupdate` about four times a second throughout, so a tick lands in that window as a
+   * matter of course; treating it as a browser block paused the video that had just started and
+   * made it a sticky user pause.
+   */
+  it('does not pause the pair while a resume is still confirming', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause();
+    slot2.browserPause();
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      // Slot 1 is up; slot 2 is still parsing. A tick here used to pause slot 1 and stick.
+      slot1.settlePlay();
+      result.current.onPlaybackTick();
+      await Promise.resolve();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.paused).toBe(false);
+    expect(slot2.paused).toBe(false);
+    expect(result.current.playing).toBe(true);
+    expect(result.current.userPaused).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
   /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
   it('does not touch a pair that kept playing while the tab was hidden', async () => {
     const { result, slot1, slot2 } = await playing();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index eda75c2093..3f5def19f5 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -7,6 +7,7 @@ import { atom, useAtom } from 'jotai';
 import type { Debate } from './api';
 import { useDebateTranscript, useRecordingUrl } from './hooks';
 import {
+  type PlayBothOutcome,
   type TurnState,
   clampSeconds,
   normalizeTurnDurationsMs,
@@ -63,6 +64,10 @@ const STALL_EPSILON_SECONDS = 0.001;
  *
  * Visibility, not focus: `document.hasFocus()` is false for every window but the frontmost one,
  * including a tab sitting fully on screen beside the one being typed in.
+ *
+ * Read straight off the document rather than through `useDebateVisibility`, whose answer is
+ * deliberately graced by a minute (GEO-2836) because it gates polling cadence. A grace is exactly
+ * wrong here — playback needs the instant a tab goes off screen, not "recently on screen".
  */
 const documentIsHidden = () => typeof document !== 'undefined' && document.visibilityState === 'hidden';
 
@@ -113,6 +118,21 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
    *   - `setUserPaused(false)` could erase a pause the viewer made during the await.
    */
   const resumeGenerationRef = React.useRef(0);
+  /**
+   * How many resumes are still confirming.
+   *
+   * `resumeGenerationRef` above answers "is this attempt still the current one"; this answers
+   * "is an attempt in progress at all", which the corrections in `updateTurnState` need and
+   * cannot get from a generation number.
+   *
+   * A resume is a split pair by construction: `playBothWithMutedFallback` starts both elements
+   * and then spends up to ~300ms confirming, and slot 2 — a cue-less MediaRecorder WebM — is
+   * routinely the later of the two. Slot 1 emits `timeupdate` about four times a second the
+   * whole time, so a tick lands inside that window as a matter of course. Reading it as "the
+   * browser stopped playback on us" pauses the element that had just started and records a user
+   * pause, which is the very failure this file keeps having to fix (GEO-2783, GEO-2895).
+   */
+  const resumesInFlightRef = React.useRef(0);
   const getRecordingPlaybackUrlRef = React.useRef(recordingUrlMutation.mutateAsync);
 
   const turnDurations = React.useMemo(
@@ -282,6 +302,12 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     const syncDelta = offsets.slot2 - offsets.slot1;
     const now = Date.now();
     const hidden = documentIsHidden();
+    // Both corrections below assume the pair's play/pause states are the settled result of a
+    // decision — ours or the viewer's. Two situations break that assumption, and in both the
+    // right move is to leave the elements alone rather than to "fix" them: a hidden tab, where
+    // the browser stops elements of its own accord, and a resume that has not finished starting
+    // them yet.
+    const pairIsSettled = !hidden && resumesInFlightRef.current === 0;
 
     if (primaryVideo) {
       const progress = primaryProgressRef.current;
@@ -340,7 +366,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     if (
       primaryVideo &&
       secondaryVideo &&
-      !hidden &&
+      pairIsSettled &&
       primaryVideo.paused !== secondaryVideo.paused &&
       playhead < timelineSeconds
     ) {
@@ -355,8 +381,19 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       return;
     }
 
-    if (!primaryVideo || primaryVideo.paused || primaryVideo.ended || playhead >= timelineSeconds) {
-      if (playhead >= timelineSeconds) setPlaying(false);
+    if (playhead >= timelineSeconds) {
+      setPlaying(false);
+      setTurnState(null);
+      return;
+    }
+
+    // Whose turn it is comes off the playhead. Slot 1 being stopped normally means playback is
+    // not running, so there is no turn to show — but off screen it usually means the browser
+    // stopped slot 1, which is the *muted* element for the whole of slot 2's turn. Nulling the
+    // turn there drops `audible`, and `audible` is what un-mutes the speaking video, so slot 2
+    // would go silent while it was still perfectly happily playing. Same silence as before,
+    // arriving through the back door.
+    if (pairIsSettled && (!primaryVideo || primaryVideo.paused || primaryVideo.ended)) {
       setTurnState(null);
       return;
     }
@@ -386,7 +423,17 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // allSettled never rejects, so a failed play() (e.g. blocked by autoplay
     // policy) leaves the video paused rather than throwing — check both the
     // settled results and the paused state, and surface the error inline.
-    const outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo);
+    //
+    // Counted across the await, not just marked: overlapping attempts are normal here (see
+    // `resumeGenerationRef`), and a flag would be cleared by the first to finish while the
+    // other was still starting its elements.
+    resumesInFlightRef.current++;
+    let outcome: PlayBothOutcome;
+    try {
+      outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo);
+    } finally {
+      resumesInFlightRef.current--;
+    }
     // Superseded while we waited — something else owns these elements now. Every write below
     // would describe a playback attempt that no longer exists, including the 'blocked' error,
     // which at this point only means "someone paused us mid-confirm".
@@ -466,6 +513,12 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
    *
    * Only when the viewer had it playing: an explicit pause, a finished debate or a scrub in
    * progress all mean "leave it alone", which is what `backgroundIntentRef` carries.
+   *
+   * The one thing it cannot tell apart is a pause the viewer made from *outside* the page while
+   * it was hidden — a media key, or an OS media control. That arrives as an element pausing on
+   * its own, indistinguishable from the background pause this exists to undo, so it is resumed
+   * too. Accepted deliberately: the ticket is about background listening, the feed autoplays
+   * muted, and the alternative is to keep a debate stopped for the far commoner reason.
    */
   const backgroundIntentRef = React.useRef<{ shouldBePlaying: boolean; resumeBoth: () => Promise<void> }>({
     shouldBePlaying: false,
@@ -476,12 +529,12 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       shouldBePlaying: playing && !userPaused && !isScrubbing && !playbackEnded,
       resumeBoth,
     };
-  });
+  }, [isScrubbing, playbackEnded, playing, resumeBoth, userPaused]);
 
   React.useEffect(() => {
     if (typeof document === 'undefined') return;
     const reconcile = () => {
-      if (document.visibilityState !== 'visible') return;
+      if (documentIsHidden()) return;
       const { shouldBePlaying, resumeBoth: resume } = backgroundIntentRef.current;
       if (!shouldBePlaying) return;
       const primaryVideo = slot1VideoRef.current;

From 6a07430dc4c9f488a713f734f8b6e599ded9221a Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 16:16:23 -0700
Subject: [PATCH 03/13] fix(debates): stop trusting slot 1's clock when the tab
 stopped it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both of Copilot's findings are the same assumption: slot 1 is the clock.
It holds while the pair is in lockstep, and stops holding the moment a
hidden tab stops one of them.

If slot 1 is the element the browser stopped, its clock freezes where it
stopped while slot 2 carries the debate on. Reading the playhead off it
was wrong in two places, so `pairPlayheadSeconds` now answers it once for
both: whichever element is actually running is the clock, slot 1 first,
and slot 1 again when both are paused — the ordinary paused, scrubbing
and pre-resume states are unchanged.

- `updateTurnState` froze the turn, so audio never moved to the next
  speaker even when the running element had long since passed the
  boundary.
- `resumeBoth` seeks the pair to the clock's position, so returning to
  the tab rewound slot 2 to slot 1's frozen position and replayed
  everything heard in the background — against the ticket's "returning to
  the tab: no reset".

Standing down off screen also turns out to be sufficient only until the
turn changes: at the boundary `audible` moves to the other recording, and
if that is the stopped one the debate goes silent for the rest of it. The
hidden path now aligns and starts that element. Narrow on purpose — it
needs a genuinely split pair, so a tab where the browser stopped both (the
muted feed default, which nobody is listening to) is left alone; a floor
between attempts keeps a browser that re-stops it from costing a seek per
tick; and a refused start records neither a pause nor an error, because
refusing an off-screen start is the browser's prerogative.
---
 apps/web/core/debates/playback-utils.test.ts  | 30 ++++++++
 apps/web/core/debates/playback-utils.ts       | 29 ++++++++
 .../core/debates/use-debate-playback.test.tsx | 69 +++++++++++++++++++
 apps/web/core/debates/use-debate-playback.ts  | 61 +++++++++++++---
 4 files changed, 181 insertions(+), 8 deletions(-)

diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index 8d0668cb2f..c403a01cdc 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -5,6 +5,7 @@ import {
   clampSeconds,
   hasProcessedVideo,
   normalizeTurnDurationsMs,
+  pairPlayheadSeconds,
   playBothWithMutedFallback,
   recordingWindowOffsetsSeconds,
   timelineSecondsFor,
@@ -138,6 +139,35 @@ describe('recordingWindowOffsetsSeconds', () => {
   });
 });
 
+describe('pairPlayheadSeconds (GEO-2947)', () => {
+  const offsets = { slot1: 1, slot2: 3 };
+  const video = (paused: boolean, currentTime: number) => ({ paused, currentTime });
+
+  it('reads slot 1 while it is running', () => {
+    expect(pairPlayheadSeconds(video(false, 10), video(false, 8), offsets)).toBe(11);
+  });
+
+  it('falls back to slot 1 when both are paused', () => {
+    expect(pairPlayheadSeconds(video(true, 10), video(true, 8), offsets)).toBe(11);
+  });
+
+  /**
+   * THE REGRESSION. A hidden tab stops the element it considers silent. If that is slot 1, its
+   * clock freezes where it stopped while slot 2 carries the debate on — so trusting slot 1 both
+   * freezes the turn (audio never reaches the next speaker) and rewinds the pair on return,
+   * replaying everything heard in the background.
+   */
+  it('reads the element still running when slot 1 is the one that stopped', () => {
+    // Slot 1 frozen at 10 (debate 11) while slot 2 has reached 20 (debate 23).
+    expect(pairPlayheadSeconds(video(true, 10), video(false, 20), offsets)).toBe(23);
+  });
+
+  it('survives an element that is not mounted yet', () => {
+    expect(pairPlayheadSeconds(null, null, offsets)).toBe(1);
+    expect(pairPlayheadSeconds(null, video(false, 20), offsets)).toBe(23);
+  });
+});
+
 describe('playBothWithMutedFallback (GEO-2783)', () => {
   /**
    * A fake video whose `play()` refuses while it has audio, which is what the autoplay policy
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index e973313753..f66967ce63 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -93,6 +93,35 @@ function offsetSeconds(startedAtMs: number | null, windowStartMs: number): numbe
   return (startedAtMs - windowStartMs) / 1_000;
 }
 
+/** What `pairPlayheadSeconds` needs off an element, so tests need not build a whole video. */
+export type ClockVideo = Pick<HTMLVideoElement, 'paused' | 'currentTime'>;
+
+/**
+ * Where the debate is, in debate-timeline seconds, given the two recordings' own clocks.
+ *
+ * Slot 1 is the clock. The pair is kept in lockstep, so its position plus its recording offset
+ * is the debate's position, and every seek is expressed that way.
+ *
+ * The exception is a pair that has been split without anyone deciding to — a browser stopping
+ * the element it considers silent once the tab is off screen (GEO-2947). If slot 1 is the one
+ * that got stopped, its clock is frozen at wherever it stopped while slot 2 carries on, and
+ * reading the debate off it is wrong twice over: the turn never advances, so audio never moves
+ * to the next speaker, and the resume on return seeks the pair back to the frozen position,
+ * replaying everything the viewer heard in the background.
+ *
+ * So: whichever element is actually running is the clock, slot 1 first. With both paused —
+ * the ordinary paused, scrubbing and pre-resume states — it is slot 1 again, unchanged.
+ */
+export function pairPlayheadSeconds(
+  primary: ClockVideo | null,
+  secondary: ClockVideo | null,
+  offsets: { slot1: number; slot2: number }
+): number {
+  if (primary && !primary.paused) return primary.currentTime + offsets.slot1;
+  if (secondary && !secondary.paused) return secondary.currentTime + offsets.slot2;
+  return (primary?.currentTime ?? 0) + offsets.slot1;
+}
+
 export function participantForSlot(debate: Debate, slot: ParticipantSlot) {
   return debate.participants.find(participant => participant.participant_slot === slot) ?? null;
 }
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index 8734633c66..cd7b786d22 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -443,6 +443,75 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(result.current.error).toBeNull();
   });
 
+  /**
+   * Copilot's catch. Standing down off screen keeps the *current* speaker running — but only
+   * until the turn changes. At the boundary `audible` moves to the other recording, and if that
+   * is the one the browser stopped, the debate goes silent for the rest of it. The stopped
+   * element has to be aligned and started, without recording a pause.
+   */
+  it('restarts the newly speaking video when the turn crosses while hidden', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    // Slot 2 is the muted element for all of slot 1's turn, so it is the one a hidden tab stops.
+    slot2.browserPause();
+    // Slot 1 carries on and crosses into slot 2's turn (30s each, slot 1 speaks first).
+    slot1.currentTime = 35;
+
+    act(() => result.current.onPlaybackTick());
+
+    expect(result.current.turnState?.slot).toBe(2); // the turn moved with the running element
+    await act(async () => {
+      slot2.settlePlay();
+      await Promise.resolve();
+    });
+    expect(slot2.paused).toBe(false); // ...and the speaker was started rather than left stopped
+    expect(slot2.currentTime).toBeCloseTo(35, 1); // aligned to where the debate actually is
+    expect(result.current.userPaused).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  /** ...but a tab where the browser stopped *both* is nobody's audio. Leave it off screen. */
+  it('does not restart anything while hidden when the whole pair is stopped', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause();
+    slot2.browserPause();
+
+    act(() => result.current.onPlaybackTick());
+
+    expect(slot1.paused).toBe(true);
+    expect(slot2.paused).toBe(true);
+  });
+
+  /**
+   * Copilot's suppressed comment. `resumeBoth` seeks the pair to the clock's position, and slot 1
+   * is the clock — so returning to a tab where slot 1 was the stopped element used to rewind
+   * slot 2 to slot 1's frozen position and replay everything heard in the background. The
+   * ticket's "returning to the tab: no reset" covers exactly this.
+   */
+  it('resumes from where the running video got to, not from the stopped one', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause(); // frozen at 0
+    slot2.currentTime = 25; // slot 2 kept playing while the tab was away
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    // Both recordings start at the debate origin in the fixture, so debate time is element time.
+    expect(slot2.currentTime).toBeCloseTo(25, 1); // not rewound to slot 1's frozen 0
+    expect(slot1.currentTime).toBeCloseTo(25, 1); // and slot 1 catches up to it
+    expect(result.current.playing).toBe(true);
+  });
+
   /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
   it('does not touch a pair that kept playing while the tab was hidden', async () => {
     const { result, slot1, slot2 } = await playing();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 3f5def19f5..315a30042f 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -11,6 +11,7 @@ import {
   type TurnState,
   clampSeconds,
   normalizeTurnDurationsMs,
+  pairPlayheadSeconds,
   participantForSlot,
   playBothWithMutedFallback,
   recordingWindowOffsetsSeconds,
@@ -44,6 +45,11 @@ const SYNC_SEEK_DRIFT_SECONDS = 0.75;
 const SYNC_NUDGE_RATE = 0.03;
 /** Floor between hard seeks, so a seek that itself causes drift cannot start a storm. */
 const MIN_SYNC_SEEK_INTERVAL_MS = 2_000;
+/**
+ * Floor between attempts to restart an element the browser stopped while the tab is off screen.
+ * Same reasoning as the seek floor: a browser that re-stops it must not cost a seek per tick.
+ */
+const MIN_BACKGROUND_RESTART_INTERVAL_MS = 2_000;
 /** No forward progress for this long, while unpaused, counts as stalled rather than slow. */
 const STALL_AFTER_MS = 500;
 /** Progress smaller than this is float noise on `currentTime`, not playback. */
@@ -98,6 +104,8 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
   /** Slot 1's last forward progress, for telling "stalled" apart from "merely not paused". */
   const primaryProgressRef = React.useRef<{ seconds: number; at: number } | null>(null);
   const lastSyncSeekAtRef = React.useRef(0);
+  /** See MIN_BACKGROUND_RESTART_INTERVAL_MS. */
+  const lastBackgroundRestartAtRef = React.useRef(0);
   /**
    * Which resume attempt is current.
    *
@@ -274,9 +282,9 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       pendingSeekSecondsRef.current = null;
     }
 
-    // slot 1 is the clock: the debate-timeline playhead is its position plus the offset
-    // between when it started recording and when the debate window opened.
-    const playhead = clampSeconds((primaryVideo?.currentTime ?? 0) + offsets.slot1, timelineSeconds);
+    // Slot 1 is the clock — except when it is the element a hidden tab stopped, in which case
+    // its clock is frozen and slot 2 is carrying the debate. See `pairPlayheadSeconds`.
+    const playhead = clampSeconds(pairPlayheadSeconds(primaryVideo, secondaryVideo, offsets), timelineSeconds);
     setPlayheadSeconds(playhead);
 
     // Lock slot 2 to slot 1, offset by the gap between when the two recordings started, so
@@ -398,8 +406,42 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       return;
     }
 
-    setTurnState(turnStateForTime(debate.first_participant_slot, turnDurations, playhead));
-  }, [debate.first_participant_slot, offsets.slot1, offsets.slot2, seekVideosTo, timelineSeconds, turnDurations]);
+    const turn = turnStateForTime(debate.first_participant_slot, turnDurations, playhead);
+    setTurnState(turn);
+
+    // The turn moving to an element the browser stopped off screen is the one case where a
+    // hidden tab needs us to act rather than stand down.
+    //
+    // Standing down keeps the *current* speaker running, which is all the viewer can hear right
+    // now — but only until the turn changes. At the boundary `audible` moves to the other
+    // recording, and if that is the one the browser stopped, the debate goes silent for the rest
+    // of it. So bring it back: align it to where the running element has got to, and start it.
+    //
+    // Deliberately narrow. It needs a pair that is genuinely split — one element still running —
+    // so a tab where the browser stopped *both* (the feed's muted default, which nobody is
+    // listening to) is left alone rather than being restarted off screen for no one. A floor
+    // between attempts keeps a browser that simply re-stops it from turning this into a seek
+    // storm; seeks on these cue-less WebM files are expensive (GEO-2828). And it never records a
+    // pause or an error on failure: refusing to start a video in a background tab is the
+    // browser's prerogative, not something the viewer needs to be told about.
+    if (hidden && turn) {
+      const speaking = turn.slot === 1 ? primaryVideo : secondaryVideo;
+      const listening = turn.slot === 1 ? secondaryVideo : primaryVideo;
+      const speakingOffset = turn.slot === 1 ? offsets.slot1 : offsets.slot2;
+      if (
+        speaking?.paused &&
+        listening &&
+        !listening.paused &&
+        now - lastBackgroundRestartAtRef.current > MIN_BACKGROUND_RESTART_INTERVAL_MS
+      ) {
+        lastBackgroundRestartAtRef.current = now;
+        speaking.currentTime = Math.max(0, playhead - speakingOffset);
+        void speaking.play().catch(() => {
+          /* The browser is entitled to refuse an off-screen start; the return path retries. */
+        });
+      }
+    }
+  }, [debate.first_participant_slot, offsets, seekVideosTo, timelineSeconds, turnDurations]);
 
   const pauseBoth = React.useCallback(() => {
     // Supersede any resume still confirming, so it cannot un-pause the viewer.
@@ -418,8 +460,11 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // awaiting, so two overlapping activations cannot both write state.
     const generation = ++resumeGenerationRef.current;
     setError(null);
-    // Realign slot 2 to slot 1's position so a resume can't leave the recordings drifting.
-    seekVideosTo(clampSeconds(primaryVideo.currentTime + offsets.slot1, timelineSeconds));
+    // Realign the pair so a resume can't leave the recordings drifting. Off the *running*
+    // element's clock, not slot 1's unconditionally: a resume on return from a backgrounded tab
+    // is exactly the case where slot 1 may be the one the browser stopped, and seeking to its
+    // frozen position would rewind the debate over everything just heard (GEO-2947).
+    seekVideosTo(clampSeconds(pairPlayheadSeconds(primaryVideo, secondaryVideo, offsets), timelineSeconds));
     // allSettled never rejects, so a failed play() (e.g. blocked by autoplay
     // policy) leaves the video paused rather than throwing — check both the
     // settled results and the paused state, and surface the error inline.
@@ -452,7 +497,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     if (outcome === 'playing-muted') setMutedByUser(true);
     setPlaying(true);
     setUserPaused(false);
-  }, [offsets.slot1, seekVideosTo, setMutedByUser, timelineSeconds]);
+  }, [offsets, seekVideosTo, setMutedByUser, timelineSeconds]);
 
   const playFromStart = React.useCallback(async () => {
     const primaryVideo = slot1VideoRef.current;

From accf8047d513a93582f5cdf1a6a55615fc38a58b Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 16:27:12 -0700
Subject: [PATCH 04/13] fix(debates): remember where the debate got to when
 both clocks freeze
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A pair the browser stops off screen is not stopped at one instant. Slot 1
goes first, slot 2 plays on, and when slot 2 stops too every clock on the
page is behind where the debate actually reached — slot 1 by however long
slot 2 kept going. Reading the position off either element then rewinds
playback over ground already heard, and `ended` (which reads as paused)
arrives the same way.

Reading the running element's clock therefore only solved half of it: it
answers "which clock" but there is no clock left to ask once both have
stopped. `pairPlayhead` now takes the caller's record of the last position
observed while something was running, and prefers it to a frozen clock
behind it. It reports whether the answer came off a live element, so the
caller can keep that record current without re-deriving "is anything
running" for itself.

The record is only safe because it is dropped whenever the position is
redefined from outside: every deliberate seek sets it (so a scrub
backwards stays where the viewer put it rather than being dragged forward
to the furthest point played), and changing debates clears it (so a new
debate does not start stranded at the old one's position).
---
 apps/web/core/debates/playback-utils.test.ts  | 41 ++++++++++----
 apps/web/core/debates/playback-utils.ts       | 39 ++++++++++---
 .../core/debates/use-debate-playback.test.tsx | 55 +++++++++++++++++++
 apps/web/core/debates/use-debate-playback.ts  | 32 +++++++++--
 4 files changed, 143 insertions(+), 24 deletions(-)

diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index c403a01cdc..3f4fd15f58 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -5,7 +5,7 @@ import {
   clampSeconds,
   hasProcessedVideo,
   normalizeTurnDurationsMs,
-  pairPlayheadSeconds,
+  pairPlayhead,
   playBothWithMutedFallback,
   recordingWindowOffsetsSeconds,
   timelineSecondsFor,
@@ -139,32 +139,51 @@ describe('recordingWindowOffsetsSeconds', () => {
   });
 });
 
-describe('pairPlayheadSeconds (GEO-2947)', () => {
+describe('pairPlayhead (GEO-2947)', () => {
   const offsets = { slot1: 1, slot2: 3 };
   const video = (paused: boolean, currentTime: number) => ({ paused, currentTime });
 
   it('reads slot 1 while it is running', () => {
-    expect(pairPlayheadSeconds(video(false, 10), video(false, 8), offsets)).toBe(11);
+    expect(pairPlayhead(video(false, 10), video(false, 8), offsets)).toEqual({ seconds: 11, live: true });
   });
 
   it('falls back to slot 1 when both are paused', () => {
-    expect(pairPlayheadSeconds(video(true, 10), video(true, 8), offsets)).toBe(11);
+    expect(pairPlayhead(video(true, 10), video(true, 8), offsets)).toEqual({ seconds: 11, live: false });
   });
 
   /**
-   * THE REGRESSION. A hidden tab stops the element it considers silent. If that is slot 1, its
-   * clock freezes where it stopped while slot 2 carries the debate on — so trusting slot 1 both
-   * freezes the turn (audio never reaches the next speaker) and rewinds the pair on return,
-   * replaying everything heard in the background.
+   * A hidden tab stops the element it considers silent. If that is slot 1, its clock freezes
+   * where it stopped while slot 2 carries the debate on — so trusting slot 1 both freezes the
+   * turn (audio never reaches the next speaker) and rewinds the pair on return, replaying
+   * everything heard in the background.
    */
   it('reads the element still running when slot 1 is the one that stopped', () => {
     // Slot 1 frozen at 10 (debate 11) while slot 2 has reached 20 (debate 23).
-    expect(pairPlayheadSeconds(video(true, 10), video(false, 20), offsets)).toBe(23);
+    expect(pairPlayhead(video(true, 10), video(false, 20), offsets)).toEqual({ seconds: 23, live: true });
+  });
+
+  /**
+   * THE SEQUENCE Copilot asked for: slot 1 stops, slot 2 plays on, slot 2 stops too. Now every
+   * clock on the page is behind where the debate got to, and the caller's memory is the only
+   * record of it. `ended` reads as paused, so it arrives here the same way.
+   */
+  it('prefers the remembered position once neither element is running', () => {
+    expect(pairPlayhead(video(true, 10), video(true, 20), offsets, 23)).toEqual({ seconds: 23, live: false });
+  });
+
+  /** Never backwards: a memory behind the frozen clock is the stale one. */
+  it('keeps the frozen clock when it is ahead of the remembered position', () => {
+    expect(pairPlayhead(video(true, 40), video(true, 5), offsets, 12)).toEqual({ seconds: 41, live: false });
+  });
+
+  /** A running element always wins over the memory — that is what keeps a scrub honest. */
+  it('ignores the remembered position while something is running', () => {
+    expect(pairPlayhead(video(false, 5), video(true, 20), offsets, 90)).toEqual({ seconds: 6, live: true });
   });
 
   it('survives an element that is not mounted yet', () => {
-    expect(pairPlayheadSeconds(null, null, offsets)).toBe(1);
-    expect(pairPlayheadSeconds(null, video(false, 20), offsets)).toBe(23);
+    expect(pairPlayhead(null, null, offsets)).toEqual({ seconds: 1, live: false });
+    expect(pairPlayhead(null, video(false, 20), offsets)).toEqual({ seconds: 23, live: true });
   });
 });
 
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index f66967ce63..0b3c0e875a 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -93,9 +93,16 @@ function offsetSeconds(startedAtMs: number | null, windowStartMs: number): numbe
   return (startedAtMs - windowStartMs) / 1_000;
 }
 
-/** What `pairPlayheadSeconds` needs off an element, so tests need not build a whole video. */
+/** What `pairPlayhead` needs off an element, so tests need not build a whole video. */
 export type ClockVideo = Pick<HTMLVideoElement, 'paused' | 'currentTime'>;
 
+export type PairPlayhead = {
+  /** Debate-timeline seconds. */
+  seconds: number;
+  /** Read off an element that is actually running, rather than reconstructed from a paused one. */
+  live: boolean;
+};
+
 /**
  * Where the debate is, in debate-timeline seconds, given the two recordings' own clocks.
  *
@@ -109,17 +116,31 @@ export type ClockVideo = Pick<HTMLVideoElement, 'paused' | 'currentTime'>;
  * to the next speaker, and the resume on return seeks the pair back to the frozen position,
  * replaying everything the viewer heard in the background.
  *
- * So: whichever element is actually running is the clock, slot 1 first. With both paused —
- * the ordinary paused, scrubbing and pre-resume states — it is slot 1 again, unchanged.
+ * So: whichever element is actually running is the clock, slot 1 first.
+ *
+ * With neither running there is no clock left to read, and the frozen one can be arbitrarily
+ * stale — slot 1 stops, slot 2 plays on for a minute, then slot 2 stops too (or reaches `ended`,
+ * which also reads as paused). That is what `lastRunningSeconds` is for: the caller's memory of
+ * where the debate had actually got to, which wins over a frozen clock behind it. Callers must
+ * reset that memory on a deliberate seek and when the recordings change, or a scrub backwards
+ * would be dragged forward by it — `useDebatePlayback` does both.
+ *
+ * `live` says which of those two it was, so a caller can keep its memory current without
+ * re-deriving "is either element running" for itself.
  */
-export function pairPlayheadSeconds(
+export function pairPlayhead(
   primary: ClockVideo | null,
   secondary: ClockVideo | null,
-  offsets: { slot1: number; slot2: number }
-): number {
-  if (primary && !primary.paused) return primary.currentTime + offsets.slot1;
-  if (secondary && !secondary.paused) return secondary.currentTime + offsets.slot2;
-  return (primary?.currentTime ?? 0) + offsets.slot1;
+  offsets: { slot1: number; slot2: number },
+  lastRunningSeconds: number | null = null
+): PairPlayhead {
+  if (primary && !primary.paused) return { seconds: primary.currentTime + offsets.slot1, live: true };
+  if (secondary && !secondary.paused) return { seconds: secondary.currentTime + offsets.slot2, live: true };
+  const frozen = (primary?.currentTime ?? 0) + offsets.slot1;
+  return {
+    seconds: lastRunningSeconds === null ? frozen : Math.max(frozen, lastRunningSeconds),
+    live: false,
+  };
 }
 
 export function participantForSlot(debate: Debate, slot: ParticipantSlot) {
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index cd7b786d22..6d15572a93 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -512,6 +512,61 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(result.current.playing).toBe(true);
   });
 
+  /**
+   * Copilot's second catch, and the sequence it asked for: slot 1 stops, slot 2 advances, slot 2
+   * stops too, tab returns. Both elements are now paused and *both* clocks are behind where the
+   * debate actually got to — slot 1 by a minute, slot 2 by however long it took the browser to
+   * get round to it. Reconstructing the position from either one replays background progress.
+   */
+  it('resumes from the furthest point reached when the tab stopped both videos in turn', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause(); // frozen at 0
+    // Slot 2's turn (30s each, slot 1 first), so slot 2 is the speaker and nothing restarts
+    // slot 1 — this is the pair genuinely running on one clock.
+    slot2.currentTime = 40;
+    act(() => result.current.onPlaybackTick()); // the tick that observes slot 2 at 40
+    slot2.browserPause(); // ...and now the browser stops it too
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBeCloseTo(40, 1); // not rewound to slot 1's frozen 0
+    expect(slot2.currentTime).toBeCloseTo(40, 1);
+    expect(result.current.playing).toBe(true);
+  });
+
+  /**
+   * The counterweight to that memory: it must never drag a deliberate move forward. A scrub back
+   * to 10s after playing to 25s has to stay at 10s, not be "corrected" to the furthest point.
+   */
+  it('lets the viewer scrub backwards past the furthest point played', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    slot1.currentTime = 25;
+    slot2.currentTime = 25;
+    act(() => result.current.onPlaybackTick());
+
+    act(() => result.current.beginScrub());
+    act(() => result.current.seekBoth(10));
+    await act(async () => {
+      result.current.endScrub();
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBeCloseTo(10, 1);
+    expect(slot2.currentTime).toBeCloseTo(10, 1);
+  });
+
   /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
   it('does not touch a pair that kept playing while the tab was hidden', async () => {
     const { result, slot1, slot2 } = await playing();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 315a30042f..70ff4373b2 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -11,7 +11,7 @@ import {
   type TurnState,
   clampSeconds,
   normalizeTurnDurationsMs,
-  pairPlayheadSeconds,
+  pairPlayhead,
   participantForSlot,
   playBothWithMutedFallback,
   recordingWindowOffsetsSeconds,
@@ -106,6 +106,16 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
   const lastSyncSeekAtRef = React.useRef(0);
   /** See MIN_BACKGROUND_RESTART_INTERVAL_MS. */
   const lastBackgroundRestartAtRef = React.useRef(0);
+  /**
+   * Debate-time of the last tick where an element was actually running.
+   *
+   * The pair's position is normally readable straight off the elements, but not once a hidden
+   * tab has stopped both of them at different moments: slot 1 stops, slot 2 plays on, slot 2
+   * stops too, and now every clock on the page is behind where the debate actually got to. This
+   * is the only record of it. Reset on a deliberate seek and when the recordings change, so it
+   * can never drag a scrub — or a different debate — forward. See `pairPlayhead`.
+   */
+  const lastRunningPlayheadRef = React.useRef<number | null>(null);
   /**
    * Which resume attempt is current.
    *
@@ -221,6 +231,9 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       if (fetchedForRef.current === recordingsKey) fetchedForRef.current = null;
     };
     setUrls({ slot1: null, slot2: null });
+    // A different debate's clocks start over; carrying this across would strand the new one
+    // at the old one's position.
+    lastRunningPlayheadRef.current = null;
     setError(null);
 
     Promise.all([
@@ -268,6 +281,9 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       // construction here, and slot 1's `currentTime` has just jumped, which is not progress.
       secondaryVideo.playbackRate = 1;
       primaryProgressRef.current = null;
+      // This *is* the debate's position now — a scrub backwards must not be dragged forward by
+      // where playback had previously got to.
+      lastRunningPlayheadRef.current = playhead;
       lastSyncSeekAtRef.current = Date.now();
       return true;
     },
@@ -283,8 +299,11 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     }
 
     // Slot 1 is the clock — except when it is the element a hidden tab stopped, in which case
-    // its clock is frozen and slot 2 is carrying the debate. See `pairPlayheadSeconds`.
-    const playhead = clampSeconds(pairPlayheadSeconds(primaryVideo, secondaryVideo, offsets), timelineSeconds);
+    // its clock is frozen and slot 2 is carrying the debate, and except when both have been
+    // stopped, where only our own memory of the position is left. See `pairPlayhead`.
+    const position = pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current);
+    const playhead = clampSeconds(position.seconds, timelineSeconds);
+    if (position.live) lastRunningPlayheadRef.current = playhead;
     setPlayheadSeconds(playhead);
 
     // Lock slot 2 to slot 1, offset by the gap between when the two recordings started, so
@@ -464,7 +483,12 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // element's clock, not slot 1's unconditionally: a resume on return from a backgrounded tab
     // is exactly the case where slot 1 may be the one the browser stopped, and seeking to its
     // frozen position would rewind the debate over everything just heard (GEO-2947).
-    seekVideosTo(clampSeconds(pairPlayheadSeconds(primaryVideo, secondaryVideo, offsets), timelineSeconds));
+    seekVideosTo(
+      clampSeconds(
+        pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current).seconds,
+        timelineSeconds
+      )
+    );
     // allSettled never rejects, so a failed play() (e.g. blocked by autoplay
     // policy) leaves the video paused rather than throwing — check both the
     // settled results and the paused state, and surface the error inline.

From 53a01000fccd77112c9ee341b028c4ef73f3d446 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 17:10:12 -0700
Subject: [PATCH 05/13] fix(debates): don't assume a media write took, and give
 `muted` one owner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iOS Safari treats `volume` as read-only: the write is accepted and
ignored, and the property stays at 1. Gating the per-turn audio on volume
while also no longer muting the listening element therefore put both
debaters on air at once there, the moment the viewer un-muted. The
assignment is now read back, and where it doesn't stick the listener is
muted exactly as it used to be. Mobile is out of scope for background
playback anyway — iOS stops inline <video> on backgrounding regardless —
so the fallback costs it nothing it had.

Auditing the rest of that class — a DOM write that doesn't take, or that
React cannot see — turned up the same shape in `muted`, which had two
owners.

`playBothWithMutedFallback` muted both elements for its retry and left
them muted when the retry also failed. React only writes a DOM property
when its own previous value differs, so a mute left behind that way is
invisible to it and outlives every later render that says otherwise: the
pair plays silently under a UI still offering a "mute" control. It now
restores what it found on the way out. The successful retry still keeps
the mute, because the caller pairs that outcome with the state change
that makes it the rendered truth.

`playFromStart` then had no reason to write `muted` at all — repairing
that leak was the only thing it did. Keeping it re-created the divergence
from the other side, since the value it knows (`mutedByUser`) stops being
the value the player renders once the per-turn gate falls back to muting.
Removed: the render owns `muted` now, and nothing writes behind it.
---
 .../browse/debate-feed-player.test.tsx        | 55 ++++++++++++++++++-
 .../debates/browse/debate-feed-player.tsx     | 43 ++++++++++-----
 apps/web/core/debates/playback-utils.test.ts  | 34 ++++++++++++
 apps/web/core/debates/playback-utils.ts       | 14 ++++-
 apps/web/core/debates/use-debate-playback.ts  | 10 +++-
 5 files changed, 137 insertions(+), 19 deletions(-)

diff --git a/apps/web/core/debates/browse/debate-feed-player.test.tsx b/apps/web/core/debates/browse/debate-feed-player.test.tsx
index 7aa5a54320..eda396b449 100644
--- a/apps/web/core/debates/browse/debate-feed-player.test.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { Debate, DebateParticipant } from '~/core/debates/api';
 import type { DebateVotesResult } from '~/core/debates/use-debate-votes';
@@ -90,6 +90,24 @@ function renderPlayer(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 }) {
  * the element no longer has two notions of "muted" written to it from two places. It also stops
  * the listening debater's element from looking like a silent video to a backgrounded tab.
  */
+/**
+ * iOS Safari: `volume` is read-only. The write is accepted and ignored, and the property stays
+ * at 1 — so a component that silences the listening debater with volume alone puts both of them
+ * on air at once. jsdom happily honours volume, so the platform has to be stubbed to test it.
+ */
+function stubReadOnlyVolume() {
+  const original = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'volume');
+  Object.defineProperty(HTMLMediaElement.prototype, 'volume', {
+    configurable: true,
+    get: () => 1,
+    set: () => {},
+  });
+  return () => {
+    if (original) Object.defineProperty(HTMLMediaElement.prototype, 'volume', original);
+    else Reflect.deleteProperty(HTMLMediaElement.prototype, 'volume');
+  };
+}
+
 describe('DebateFeedPlayer audio gating (GEO-2947)', () => {
   beforeEach(() => {
     mocks.controller = null;
@@ -122,3 +140,38 @@ describe('DebateFeedPlayer audio gating (GEO-2947)', () => {
     expect(slot2.volume).toBe(0);
   });
 });
+
+describe('DebateFeedPlayer audio gating where volume is read-only (GEO-2947)', () => {
+  let restoreVolume: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreVolume = stubReadOnlyVolume();
+  });
+
+  afterEach(() => {
+    restoreVolume?.();
+    restoreVolume = null;
+  });
+
+  /** THE REGRESSION Copilot caught: without the fallback, both debaters are audible on iOS. */
+  it('mutes the listening debater when the volume assignment does not stick', () => {
+    const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 1 });
+
+    expect(slot1.muted).toBe(false); // the speaker is still the one you hear
+    expect(slot2.muted).toBe(true); // ...and the listener is silenced the only way left
+  });
+
+  it('moves that mute with the turn', () => {
+    const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 2 });
+
+    expect(slot1.muted).toBe(true);
+    expect(slot2.muted).toBe(false);
+  });
+
+  it("still honours the viewer's own mute on both elements", () => {
+    const { slot1, slot2 } = renderPlayer({ mutedByUser: true, turnSlot: 1 });
+
+    expect(slot1.muted).toBe(true);
+    expect(slot2.muted).toBe(true);
+  });
+});
diff --git a/apps/web/core/debates/browse/debate-feed-player.tsx b/apps/web/core/debates/browse/debate-feed-player.tsx
index c333630f22..486057d63b 100644
--- a/apps/web/core/debates/browse/debate-feed-player.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.tsx
@@ -223,26 +223,40 @@ function DebaterVideo({
   const name = participant ? speakerLabel(participant) : 'Debater';
 
   /**
-   * Whose turn it is decides the *volume*, not the `muted` flag (GEO-2947).
+   * Whose turn it is decides the *volume*, not the `muted` flag (GEO-2947) — where the platform
+   * lets us, which is not everywhere.
    *
-   * `muted` now carries only the viewer's own mute, which is the one thing it should mean — and
-   * the one thing `playFromStart` and `playBothWithMutedFallback` already write it for, so the
-   * element no longer has two different notions of "muted" written to it from two places.
+   * `muted` should carry only the viewer's own mute, which is the one thing `playFromStart` and
+   * `playBothWithMutedFallback` already write it for; putting the per-turn gate on it too gave
+   * the element two different notions of "muted" written from two places. And a browser is
+   * entitled to stop a <video> it considers silent once the tab is off screen, so muting the
+   * listening debater for the length of a turn is what made one of the pair look stoppable.
+   * Volume 0 is the same silence to a listener without being a mute.
    *
-   * The reason to move the per-turn gate off it: a browser is entitled to stop a <video> it
-   * considers silent once the tab is off screen, and muting the listening debater for the length
-   * of a turn is what made one of the pair look silent. Volume 0 is the same silence to a
-   * listener without being a mute. It is not a guarantee — a browser may well count volume 0 as
-   * inaudible too — but it costs nothing, and the player no longer depends on the answer either
-   * way: `useDebatePlayback` now leaves a split pair alone off screen and reconciles on return.
+   * iOS Safari does not allow it. `volume` is read-only there: the write is accepted and ignored,
+   * and the property stays at 1. Since this component also stopped muting the listening element,
+   * that would put *both* debaters on air at once the moment the viewer un-mutes — which is why
+   * the assignment is read back rather than assumed. Where it doesn't stick we mute the listener
+   * exactly as before. Mobile is out of scope for background playback anyway (iOS stops inline
+   * <video> on backgrounding regardless), so falling back costs it nothing it had.
    *
-   * Layout effect, so the volume lands in the same commit that React writes `muted` — a turn
-   * change must never leave both recordings briefly audible at once.
+   * Once is enough: it is a platform fact, not a per-turn one, and the first write happens on
+   * mount while the feed is still muted by default — so the fallback is already in place well
+   * before there is any audio to get wrong.
+   *
+   * Note the speaking element cannot detect it — it asks for volume 1 and reads back 1, which is
+   * indistinguishable from the write having worked. That is exactly right: it is the *listening*
+   * element that needs silencing, and it is the one whose write visibly fails. Each detects it
+   * the first time it has something to lose, and the turn it becomes the listener is that time.
    */
+  const [volumeIsWritable, setVolumeIsWritable] = React.useState(true);
+
   React.useLayoutEffect(() => {
     const video = videoRef.current;
     if (!video) return;
-    video.volume = audible ? 1 : 0;
+    const wanted = audible ? 1 : 0;
+    video.volume = wanted;
+    if (Math.abs(video.volume - wanted) > 0.01) setVolumeIsWritable(false);
   }, [audible, src, videoRef]);
 
   // A personal space's own id resolves to its "system entity" (an ugly technical
@@ -267,7 +281,8 @@ function DebaterVideo({
             playsInline
             preload="metadata"
             src={src}
-            muted={mutedByUser}
+            // The viewer's own mute — plus the listening debater's, where `volume` is a no-op.
+            muted={mutedByUser || (!volumeIsWritable && !audible)}
             onEnded={onPlaybackTick}
             onLoadedMetadata={onPlaybackTick}
             onPause={onPlaybackTick}
diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index 3f4fd15f58..74cf557eb1 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -302,6 +302,40 @@ describe('playBothWithMutedFallback (GEO-2783)', () => {
     expect(await playBothWithMutedFallback(a, b)).toBe('blocked');
   });
 
+  /**
+   * A mute left behind by a failed retry is invisible to React — it only writes a DOM property
+   * when its own previous value differs — so it survives every later render that says otherwise,
+   * leaving the pair silently muted under a UI still offering a "mute" control (GEO-2947).
+   */
+  it('restores the original muted state when it gives up', async () => {
+    // Refuses to start either way, so the muted retry fails too and the helper gives up.
+    const stuck = () => {
+      const video = fakeVideo({ muted: false });
+      video.play = async () => {
+        video.plays += 1;
+      };
+      return video;
+    };
+    const a = stuck();
+    const b = stuck();
+
+    expect(await playBothWithMutedFallback(a, b)).toBe('blocked');
+
+    expect(a.muted).toBe(false);
+    expect(b.muted).toBe(false);
+  });
+
+  /** ...but a retry that *worked* keeps the mute: the caller records it as the rendered truth. */
+  it('keeps the mute when the muted retry succeeds', async () => {
+    const a = fakeVideo({ muted: false, blockUnmuted: true });
+    const b = fakeVideo({ muted: false, blockUnmuted: true });
+
+    expect(await playBothWithMutedFallback(a, b)).toBe('playing-muted');
+
+    expect(a.muted).toBe(true);
+    expect(b.muted).toBe(true);
+  });
+
   it('keeps sound when the play is gesture-driven', async () => {
     const a = fakeVideo({ muted: false, blockUnmuted: false });
     const b = fakeVideo({ muted: false, blockUnmuted: false });
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index 0b3c0e875a..248a8706c3 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -218,7 +218,19 @@ export async function playBothWithMutedFallback(
   // Nothing to retry if audio was already off — the block is not the autoplay policy.
   if (primary.muted && secondary.muted) return 'blocked';
 
+  const primaryWasMuted = primary.muted;
+  const secondaryWasMuted = secondary.muted;
   primary.muted = true;
   secondary.muted = true;
-  return (await attempt()) ? 'playing-muted' : 'blocked';
+  if (await attempt()) return 'playing-muted';
+
+  // Leave no trace on the way out. `muted` is a rendered prop on these elements, and React only
+  // writes a DOM property when its own previous value differs — so a mute left behind here is
+  // invisible to it and survives every later render that says otherwise. 'playing-muted' is safe
+  // because the caller pairs it with the state change that makes the mute the rendered truth;
+  // 'blocked' has no such pairing, and used to leave the pair silently muted underneath a UI
+  // that still offered a "mute" control (GEO-2947).
+  primary.muted = primaryWasMuted;
+  secondary.muted = secondaryWasMuted;
+  return 'blocked';
 }
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 70ff4373b2..5bd95ca65e 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -533,11 +533,15 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     pendingSeekSecondsRef.current = null;
     primaryVideo.pause();
     secondaryVideo.pause();
-    primaryVideo.muted = mutedByUser;
-    secondaryVideo.muted = mutedByUser;
+    // No `muted` write here any more. It existed to repair the one case where the elements could
+    // be muted behind React's back — a blocked autoplay fallback — and `playBothWithMutedFallback`
+    // now undoes that itself, so writing it again only re-created the divergence from the other
+    // direction: the value this knows (`mutedByUser`) is not the value the player renders once the
+    // per-turn gate falls back to muting on a platform where `volume` is read-only (GEO-2947).
+    // `muted` has one owner now, and it is the render.
     seekVideosTo(0);
     await resumeBoth();
-  }, [mutedByUser, resumeBoth, seekVideosTo]);
+  }, [resumeBoth, seekVideosTo]);
 
   const seekBoth = React.useCallback(
     (seconds: number) => {

From 23d1ad358e3dbfe47f170811cfe8b549f9358ac3 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 17:27:54 -0700
Subject: [PATCH 06/13] fix(debates): let the renderer own repairing a mute
 made behind React
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The restore added last commit was itself the bug it was fixing. It put
back a `muted` value captured before a ~300ms await, so a viewer who muted
during the attempt — from the control that stays visible, or from another
card sharing the preference — had that decision overwritten with the older
one. React had already committed `muted=true` and so believes the DOM
says true; a write it disagrees with is one it never repairs, and the pair
plays audibly under a UI showing muted.

There is no value the helper can restore: it does not know what the caller
renders `muted` from, and anything it captures is out of date by the time
it could write it. So it no longer tries. The repair belongs to whoever
renders the prop, and `DebateFeedPlayer` now re-asserts it — not during
the attempt, which depends on the mute it just made, but the moment
`isResuming` falls, which is itself what re-runs the effect.

Also: the playhead memory is refreshed on ticks, and `timeupdate` is
throttled in a background tab, so an element that stops between ticks
stops somewhere the memory never saw — and its own `pause` arrives when it
already reads as paused. Both frozen clocks are now weighed alongside the
memory and the furthest wins, with slot 2's counted only once its
`currentTime` shows the recording has played, so an untouched slot 2 can't
report its start offset as debate progress.

And two comments that had outlived their code: the reconcile effect still
described a resume that seeks slot 2 to slot 1, and `playFromStart` still
credited the helper with a restore that no longer exists.
---
 .../browse/debate-feed-player.test.tsx        | 61 +++++++++++++++++--
 .../debates/browse/debate-feed-player.tsx     | 27 ++++++--
 apps/web/core/debates/playback-utils.test.ts  | 28 ++++++++-
 apps/web/core/debates/playback-utils.ts       | 47 ++++++++------
 .../core/debates/use-debate-playback.test.tsx | 28 +++++++++
 apps/web/core/debates/use-debate-playback.ts  | 35 ++++++++---
 6 files changed, 185 insertions(+), 41 deletions(-)

diff --git a/apps/web/core/debates/browse/debate-feed-player.test.tsx b/apps/web/core/debates/browse/debate-feed-player.test.tsx
index eda396b449..0a4583e0b5 100644
--- a/apps/web/core/debates/browse/debate-feed-player.test.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.test.tsx
@@ -44,7 +44,7 @@ const votes: DebateVotesResult = {
  * A controller in the one state that matters here: playing, with a turn in progress, both
  * recordings loaded. `mutedByUser` and `turnState` are what the audio gating reads.
  */
-function controllerFixture(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 }) {
+function controllerFixture(overrides: { mutedByUser: boolean; turnSlot: 1 | 2; isResuming?: boolean }) {
   return {
     slot1VideoRef: { current: null },
     slot2VideoRef: { current: null },
@@ -56,6 +56,7 @@ function controllerFixture(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 })
     playing: true,
     userPaused: false,
     isScrubbing: false,
+    isResuming: overrides.isResuming ?? false,
     playbackEnded: false,
     mutedByUser: overrides.mutedByUser,
     setMutedByUser: vi.fn(),
@@ -75,13 +76,21 @@ function controllerFixture(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 })
   };
 }
 
-function renderPlayer(overrides: { mutedByUser: boolean; turnSlot: 1 | 2 }) {
+function renderPlayer(overrides: { mutedByUser: boolean; turnSlot: 1 | 2; isResuming?: boolean }) {
   mocks.controller = controllerFixture(overrides);
-  const { container } = render(
+  const { container, rerender } = render(
     <DebateFeedPlayer debate={{ id: 'debate-1' } as unknown as Debate} active votes={votes} />
   );
   const [slot1, slot2] = Array.from(container.querySelectorAll('video'));
-  return { slot1, slot2 };
+  return {
+    slot1,
+    slot2,
+    /** Re-render with a new controller state, as the hook's own state changes would. */
+    update(next: { mutedByUser: boolean; turnSlot: 1 | 2; isResuming?: boolean }) {
+      mocks.controller = controllerFixture(next);
+      rerender(<DebateFeedPlayer debate={{ id: 'debate-1' } as unknown as Debate} active votes={votes} />);
+    },
+  };
 }
 
 /**
@@ -175,3 +184,47 @@ describe('DebateFeedPlayer audio gating where volume is read-only (GEO-2947)', (
     expect(slot2.muted).toBe(true);
   });
 });
+
+/**
+ * `playBothWithMutedFallback` mutes both elements to retry a blocked play and leaves them muted:
+ * it neither knows what this component renders `muted` from, nor holds a value still current
+ * after its ~300ms await. React will not repair that on its own — it writes a DOM property only
+ * when its *own* previous value differs, and a mute it never made is invisible to it — so without
+ * this the element plays audibly under a UI showing muted (GEO-2947).
+ */
+describe('DebateFeedPlayer repairs a mute made behind React (GEO-2947)', () => {
+  it('re-asserts the rendered mute once the resume is over', () => {
+    const { slot1, update } = renderPlayer({ mutedByUser: false, turnSlot: 1, isResuming: true });
+
+    // What the fallback does to the speaking element mid-retry, behind React's back.
+    slot1.muted = true;
+    expect(slot1.muted).toBe(true);
+
+    update({ mutedByUser: false, turnSlot: 1, isResuming: false });
+
+    expect(slot1.muted).toBe(false);
+  });
+
+  /** And it must not do it *during* the retry — that would block the play it is waiting on. */
+  it('leaves the mute alone while the resume is still confirming', () => {
+    const { slot1, update } = renderPlayer({ mutedByUser: false, turnSlot: 1, isResuming: true });
+
+    slot1.muted = true;
+    // A tick mid-attempt: the turn moves, so the component re-renders and the effect re-runs.
+    update({ mutedByUser: false, turnSlot: 2, isResuming: true });
+
+    expect(slot1.muted).toBe(true);
+  });
+
+  /** A mute the viewer made during the attempt wins — it is the rendered truth by then. */
+  it('repairs to the newer preference, not the one the attempt started with', () => {
+    const { slot1, slot2, update } = renderPlayer({ mutedByUser: false, turnSlot: 1, isResuming: true });
+
+    slot1.muted = true;
+    slot2.muted = true;
+    update({ mutedByUser: true, turnSlot: 1, isResuming: false });
+
+    expect(slot1.muted).toBe(true);
+    expect(slot2.muted).toBe(true);
+  });
+});
diff --git a/apps/web/core/debates/browse/debate-feed-player.tsx b/apps/web/core/debates/browse/debate-feed-player.tsx
index 486057d63b..ab25c85ade 100644
--- a/apps/web/core/debates/browse/debate-feed-player.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.tsx
@@ -51,6 +51,7 @@ export function DebateFeedPlayer({ debate, active, preload = false, votes }: Deb
     playing,
     userPaused,
     isScrubbing,
+    isResuming,
     playbackEnded,
     mutedByUser,
     setMutedByUser,
@@ -108,6 +109,7 @@ export function DebateFeedPlayer({ debate, active, preload = false, votes }: Deb
         countdown={playing && turnState?.slot === 1 ? turnState : null}
         subtitle={activeSlot === 1 ? subtitle : null}
         mutedByUser={mutedByUser}
+        isResuming={isResuming}
         onPlaybackTick={onPlaybackTick}
         onToggle={togglePlayback}
         votes={votes}
@@ -145,6 +147,7 @@ export function DebateFeedPlayer({ debate, active, preload = false, votes }: Deb
         countdown={playing && turnState?.slot === 2 ? turnState : null}
         subtitle={activeSlot === 2 ? subtitle : null}
         mutedByUser={mutedByUser}
+        isResuming={isResuming}
         onPlaybackTick={onPlaybackTick}
         onToggle={togglePlayback}
         votes={votes}
@@ -200,6 +203,7 @@ function DebaterVideo({
   countdown,
   subtitle,
   mutedByUser,
+  isResuming,
   onPlaybackTick,
   onToggle,
   votes,
@@ -213,6 +217,7 @@ function DebaterVideo({
   countdown: TurnState;
   subtitle: string | null;
   mutedByUser: boolean;
+  isResuming: boolean;
   onPlaybackTick: () => void;
   onToggle: () => void;
   votes: DebateVotesResult;
@@ -226,9 +231,8 @@ function DebaterVideo({
    * Whose turn it is decides the *volume*, not the `muted` flag (GEO-2947) — where the platform
    * lets us, which is not everywhere.
    *
-   * `muted` should carry only the viewer's own mute, which is the one thing `playFromStart` and
-   * `playBothWithMutedFallback` already write it for; putting the per-turn gate on it too gave
-   * the element two different notions of "muted" written from two places. And a browser is
+   * `muted` carries only the viewer's own mute now; putting the per-turn gate on it too gave the
+   * element two different notions of "muted" written from two places. And a browser is
    * entitled to stop a <video> it considers silent once the tab is off screen, so muting the
    * listening debater for the length of a turn is what made one of the pair look stoppable.
    * Volume 0 is the same silence to a listener without being a mute.
@@ -250,6 +254,7 @@ function DebaterVideo({
    * the first time it has something to lose, and the turn it becomes the listener is that time.
    */
   const [volumeIsWritable, setVolumeIsWritable] = React.useState(true);
+  const muted = mutedByUser || (!volumeIsWritable && !audible);
 
   React.useLayoutEffect(() => {
     const video = videoRef.current;
@@ -257,7 +262,19 @@ function DebaterVideo({
     const wanted = audible ? 1 : 0;
     video.volume = wanted;
     if (Math.abs(video.volume - wanted) > 0.01) setVolumeIsWritable(false);
-  }, [audible, src, videoRef]);
+
+    // `muted` is a rendered prop, but `playBothWithMutedFallback` mutes both elements to retry a
+    // blocked play and cannot put them back (it neither knows what this renders `muted` from nor
+    // holds a value still current after its await). React will not repair that itself — it only
+    // writes a DOM property when its *own* previous value differs, and a mute it never made is
+    // invisible to it — so the element would play audibly under a UI showing muted. Re-assert it
+    // here, where the rendered truth actually lives.
+    //
+    // Not while a resume is confirming: the retry depends on the mute it just made, and writing
+    // over it mid-attempt would block the play this is trying to let happen. `isResuming` falling
+    // is itself what runs this effect again, so the repair lands the moment the attempt is over.
+    if (!isResuming) video.muted = muted;
+  }, [audible, isResuming, muted, src, videoRef]);
 
   // A personal space's own id resolves to its "system entity" (an ugly technical
   // record). The space's page entity is the real profile, so open that once it's
@@ -282,7 +299,7 @@ function DebaterVideo({
             preload="metadata"
             src={src}
             // The viewer's own mute — plus the listening debater's, where `volume` is a no-op.
-            muted={mutedByUser || (!volumeIsWritable && !audible)}
+            muted={muted}
             onEnded={onPlaybackTick}
             onLoadedMetadata={onPlaybackTick}
             onPause={onPlaybackTick}
diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index 74cf557eb1..9c1534ee97 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -171,6 +171,25 @@ describe('pairPlayhead (GEO-2947)', () => {
     expect(pairPlayhead(video(true, 10), video(true, 20), offsets, 23)).toEqual({ seconds: 23, live: false });
   });
 
+  /**
+   * The memory is refreshed on ticks, and `timeupdate` is throttled in a background tab — so an
+   * element that stops between ticks stops somewhere the memory never saw. Its own `pause` event
+   * arrives too late to help: by then it already reads as paused. Slot 2's frozen clock is the
+   * only record of those last seconds.
+   */
+  it('weighs slot 2 frozen clock when it stopped past the last tick observed', () => {
+    // Memory says 23 (the last tick), but slot 2 actually ran on to 30 (debate 33).
+    expect(pairPlayhead(video(true, 10), video(true, 30), offsets, 23)).toEqual({ seconds: 33, live: false });
+  });
+
+  /**
+   * ...but only once slot 2 has actually played. A recording that starts after the debate window
+   * has a positive offset, so an untouched slot 2 would otherwise read as being that far in.
+   */
+  it('ignores a slot 2 that has never played, offset and all', () => {
+    expect(pairPlayhead(video(true, 0), video(true, 0), offsets)).toEqual({ seconds: 1, live: false });
+  });
+
   /** Never backwards: a memory behind the frozen clock is the stale one. */
   it('keeps the frozen clock when it is ahead of the remembered position', () => {
     expect(pairPlayhead(video(true, 40), video(true, 5), offsets, 12)).toEqual({ seconds: 41, live: false });
@@ -307,7 +326,7 @@ describe('playBothWithMutedFallback (GEO-2783)', () => {
    * when its own previous value differs — so it survives every later render that says otherwise,
    * leaving the pair silently muted under a UI still offering a "mute" control (GEO-2947).
    */
-  it('restores the original muted state when it gives up', async () => {
+  it('leaves the pair muted when it gives up, for the renderer to repair', async () => {
     // Refuses to start either way, so the muted retry fails too and the helper gives up.
     const stuck = () => {
       const video = fakeVideo({ muted: false });
@@ -321,8 +340,11 @@ describe('playBothWithMutedFallback (GEO-2783)', () => {
 
     expect(await playBothWithMutedFallback(a, b)).toBe('blocked');
 
-    expect(a.muted).toBe(false);
-    expect(b.muted).toBe(false);
+    // Deliberately not restored. Anything captured on the way in is up to ~300ms stale by now —
+    // the viewer can mute mid-attempt — and React never repairs a DOM write it did not make, so
+    // a stale `false` written back here would play audibly under a UI showing muted (GEO-2947).
+    expect(a.muted).toBe(true);
+    expect(b.muted).toBe(true);
   });
 
   /** ...but a retry that *worked* keeps the mute: the caller records it as the rendered truth. */
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index 248a8706c3..ada829fefd 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -125,8 +125,17 @@ export type PairPlayhead = {
  * reset that memory on a deliberate seek and when the recordings change, or a scrub backwards
  * would be dragged forward by it — `useDebatePlayback` does both.
  *
- * `live` says which of those two it was, so a caller can keep its memory current without
- * re-deriving "is either element running" for itself.
+ * The memory alone is not enough either. It is refreshed on ticks, and `timeupdate` is throttled
+ * in a background tab — so an element that stops between ticks stops somewhere the memory never
+ * saw, and its own `pause` event arrives too late to help (it already reads as paused). Both
+ * frozen clocks are therefore weighed alongside it, and the furthest wins.
+ *
+ * Slot 2's is weighed only once its `currentTime` shows the recording has actually played.
+ * A recording that starts after the debate window has a positive offset, so an untouched slot 2
+ * would otherwise read as being that far into the debate before a frame of it has been shown.
+ *
+ * `live` says whether the answer came off a running element, so a caller can keep its memory
+ * current without re-deriving "is either element running" for itself.
  */
 export function pairPlayhead(
   primary: ClockVideo | null,
@@ -136,11 +145,10 @@ export function pairPlayhead(
 ): PairPlayhead {
   if (primary && !primary.paused) return { seconds: primary.currentTime + offsets.slot1, live: true };
   if (secondary && !secondary.paused) return { seconds: secondary.currentTime + offsets.slot2, live: true };
-  const frozen = (primary?.currentTime ?? 0) + offsets.slot1;
-  return {
-    seconds: lastRunningSeconds === null ? frozen : Math.max(frozen, lastRunningSeconds),
-    live: false,
-  };
+  const candidates = [(primary?.currentTime ?? 0) + offsets.slot1];
+  if (secondary && secondary.currentTime > 0) candidates.push(secondary.currentTime + offsets.slot2);
+  if (lastRunningSeconds !== null) candidates.push(lastRunningSeconds);
+  return { seconds: Math.max(...candidates), live: false };
 }
 
 export function participantForSlot(debate: Debate, slot: ParticipantSlot) {
@@ -218,19 +226,18 @@ export async function playBothWithMutedFallback(
   // Nothing to retry if audio was already off — the block is not the autoplay policy.
   if (primary.muted && secondary.muted) return 'blocked';
 
-  const primaryWasMuted = primary.muted;
-  const secondaryWasMuted = secondary.muted;
+  // Both outcomes below leave the elements muted, and deliberately so: this function does not
+  // know what the caller renders `muted` from, and it has been awaiting for up to ~300ms, so any
+  // value it captured on the way in may already be out of date — the viewer can mute from the
+  // control that stays visible during playback, or from another card sharing the preference.
+  // Writing a stale snapshot back is worse than leaving the mute: React only writes a DOM
+  // property when its own previous value differs, so a write it disagrees with is one it will
+  // never repair, and the pair would play audibly under a UI showing muted (GEO-2947).
+  //
+  // 'playing-muted' is paired by the caller with the state change that makes the mute the
+  // rendered truth. 'blocked' is repaired by whoever renders `muted`, once the attempt is over —
+  // `DebateFeedPlayer` re-asserts it when `isResuming` falls.
   primary.muted = true;
   secondary.muted = true;
-  if (await attempt()) return 'playing-muted';
-
-  // Leave no trace on the way out. `muted` is a rendered prop on these elements, and React only
-  // writes a DOM property when its own previous value differs — so a mute left behind here is
-  // invisible to it and survives every later render that says otherwise. 'playing-muted' is safe
-  // because the caller pairs it with the state change that makes the mute the rendered truth;
-  // 'blocked' has no such pairing, and used to leave the pair silently muted underneath a UI
-  // that still offered a "mute" control (GEO-2947).
-  primary.muted = primaryWasMuted;
-  secondary.muted = secondaryWasMuted;
-  return 'blocked';
+  return (await attempt()) ? 'playing-muted' : 'blocked';
 }
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index 6d15572a93..7388243910 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -542,6 +542,34 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(result.current.playing).toBe(true);
   });
 
+  /**
+   * The same sequence with no tick between slot 2 advancing and slot 2 stopping — which is the
+   * realistic shape of it, since `timeupdate` is throttled in a background tab. The hook's memory
+   * never saw 40, and slot 2's own `pause` arrives when it already reads as paused, so slot 2's
+   * frozen clock is the only record of those last seconds.
+   */
+  it('resumes from a stopped slot 2 that never reported its last position', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause(); // frozen at 0
+    // Advances and stops with nothing observing it in between.
+    slot2.currentTime = 40;
+    slot2.browserPause();
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBeCloseTo(40, 1);
+    expect(slot2.currentTime).toBeCloseTo(40, 1);
+    expect(result.current.playing).toBe(true);
+  });
+
   /**
    * The counterweight to that memory: it must never drag a deliberate move forward. A scrub back
    * to 10s after playing to 25s has to stay at 10s, not be "corrected" to the furthest point.
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 5bd95ca65e..7085ad7c6c 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -151,6 +151,16 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
    * pause, which is the very failure this file keeps having to fix (GEO-2783, GEO-2895).
    */
   const resumesInFlightRef = React.useRef(0);
+  /**
+   * The same fact as `resumesInFlightRef`, rendered.
+   *
+   * `playBothWithMutedFallback` mutes both elements to retry a blocked play and leaves them that
+   * way; it cannot put them back, because it does not know what the caller renders `muted` from
+   * and anything it captured is a whole confirm window (~300ms an attempt) out of date by then. So the component that renders `muted`
+   * repairs it instead, and this is how it knows the attempt is over — and, while it is not,
+   * that it must not write `muted` from underneath a retry that depends on it.
+   */
+  const [isResuming, setIsResuming] = React.useState(false);
   const getRecordingPlaybackUrlRef = React.useRef(recordingUrlMutation.mutateAsync);
 
   const turnDurations = React.useMemo(
@@ -497,11 +507,15 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // `resumeGenerationRef`), and a flag would be cleared by the first to finish while the
     // other was still starting its elements.
     resumesInFlightRef.current++;
+    setIsResuming(true);
     let outcome: PlayBothOutcome;
     try {
       outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo);
     } finally {
       resumesInFlightRef.current--;
+      // Only the last one out: overlapping attempts are normal here, and the renderer must not
+      // repair `muted` while another retry is still relying on it.
+      if (resumesInFlightRef.current === 0) setIsResuming(false);
     }
     // Superseded while we waited — something else owns these elements now. Every write below
     // would describe a playback attempt that no longer exists, including the 'blocked' error,
@@ -533,12 +547,12 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     pendingSeekSecondsRef.current = null;
     primaryVideo.pause();
     secondaryVideo.pause();
-    // No `muted` write here any more. It existed to repair the one case where the elements could
-    // be muted behind React's back — a blocked autoplay fallback — and `playBothWithMutedFallback`
-    // now undoes that itself, so writing it again only re-created the divergence from the other
-    // direction: the value this knows (`mutedByUser`) is not the value the player renders once the
-    // per-turn gate falls back to muting on a platform where `volume` is read-only (GEO-2947).
-    // `muted` has one owner now, and it is the render.
+    // No `muted` write here any more. It existed to repair the one case where the elements can be
+    // muted behind React's back — a blocked autoplay fallback — and that repair belongs to
+    // whoever renders `muted`, which is not this hook: the value available here (`mutedByUser`)
+    // stops being the rendered one as soon as the per-turn gate falls back to muting on a
+    // platform where `volume` is read-only. Writing it from here only moved the divergence
+    // (GEO-2947). `DebateFeedPlayer` re-asserts it when `isResuming` falls.
     seekVideosTo(0);
     await resumeBoth();
   }, [resumeBoth, seekVideosTo]);
@@ -580,9 +594,11 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
    * with no controls showing — `playing` is true, so the feed's autoplay effect (`!playing`)
    * would never retry it.
    *
-   * `resumeBoth` is the right instrument: it re-seeks slot 2 to slot 1's position first, so the
-   * pair comes back in step from wherever playback actually got to rather than from where it was
-   * when the tab was hidden. Nothing resets the playhead and nothing touches the mute preference.
+   * `resumeBoth` is the right instrument: it realigns both elements to `pairPlayhead` before
+   * starting them, so the pair comes back in step at wherever the debate actually got to — which
+   * off the back of a hidden tab is whichever element was still running, or the furthest position
+   * seen if the browser stopped them both, and is emphatically not slot 1's frozen clock. Nothing
+   * resets the playhead and nothing touches the mute preference.
    *
    * Only when the viewer had it playing: an explicit pause, a finished debate or a scrub in
    * progress all mean "leave it alone", which is what `backgroundIntentRef` carries.
@@ -670,6 +686,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     playing,
     userPaused,
     isScrubbing,
+    isResuming,
     playbackEnded,
     mutedByUser,
     setMutedByUser,

From 171701a2c1305b83275340bb63155f30007db555 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 17:54:27 -0700
Subject: [PATCH 07/13] fix(debates): keep the background playhead recovery out
 of the foreground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Taking the furthest of the two frozen clocks was written for a pair the
browser stopped off screen, but it applied to every paused pair — so an
ordinary pause, or a card scrolled out of view, would resume from slot 2.
Slot 2 is ahead on purpose: the drift nudge puts it there, and a stalled
slot 1 leaves it much further ahead (GEO-2828). Resuming from it skips
audio the viewer never heard.

`pairPlayhead` now takes `trustSecondary`, and without it behaves exactly
as this file always did: slot 1 is the clock, raised only by the caller's
own record. Slot 2's clock — running or frozen — is evidence only when the
pair was stopped by the browser rather than by us.

Two callers pass it. The tick path passes `hidden`, so the turn and the
playhead keep moving while the tab is away. And the reconcile passes it
once on the way back, before resuming: that is the only foreground moment
where a frozen slot 1 means nothing, and settling the position there
rather than inside `resumeBoth` is what keeps every other resume — pause,
scrub, scroll-away, autoplay — on slot 1's canonical clock.

The ticks that run while hidden usually record this anyway, since a
browser pausing an element fires `pause` and that is wired to
`onPlaybackTick`. Recovering on the way back means the fix does not
depend on a throttled background tab having delivered them.
---
 apps/web/core/debates/playback-utils.test.ts  | 102 +++++++++++-------
 apps/web/core/debates/playback-utils.ts       |  56 +++++-----
 .../core/debates/use-debate-playback.test.tsx |  50 +++++++++
 apps/web/core/debates/use-debate-playback.ts  |  60 +++++++++--
 4 files changed, 192 insertions(+), 76 deletions(-)

diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index 9c1534ee97..0f041ecb5b 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -152,57 +152,79 @@ describe('pairPlayhead (GEO-2947)', () => {
   });
 
   /**
-   * A hidden tab stops the element it considers silent. If that is slot 1, its clock freezes
-   * where it stopped while slot 2 carries the debate on — so trusting slot 1 both freezes the
-   * turn (audio never reaches the next speaker) and rewinds the pair on return, replaying
-   * everything heard in the background.
+   * In the foreground slot 1 is canonical, full stop. Slot 2 is *deliberately* allowed to run
+   * ahead — the drift nudge puts it there, and a stalled slot 1 leaves it much further ahead
+   * (GEO-2828) — so an ordinary pause or a scroll-away must not resume from it, or playback skips
+   * audio the viewer never heard.
    */
-  it('reads the element still running when slot 1 is the one that stopped', () => {
-    // Slot 1 frozen at 10 (debate 11) while slot 2 has reached 20 (debate 23).
-    expect(pairPlayhead(video(true, 10), video(false, 20), offsets)).toEqual({ seconds: 23, live: true });
-  });
+  describe('without trustSecondary (the foreground)', () => {
+    it('ignores a slot 2 that has run ahead of a paused slot 1', () => {
+      expect(pairPlayhead(video(true, 10), video(true, 30), offsets)).toEqual({ seconds: 11, live: false });
+    });
 
-  /**
-   * THE SEQUENCE Copilot asked for: slot 1 stops, slot 2 plays on, slot 2 stops too. Now every
-   * clock on the page is behind where the debate got to, and the caller's memory is the only
-   * record of it. `ended` reads as paused, so it arrives here the same way.
-   */
-  it('prefers the remembered position once neither element is running', () => {
-    expect(pairPlayhead(video(true, 10), video(true, 20), offsets, 23)).toEqual({ seconds: 23, live: false });
-  });
+    it('ignores a running slot 2 while slot 1 is paused', () => {
+      expect(pairPlayhead(video(true, 10), video(false, 30), offsets)).toEqual({ seconds: 11, live: false });
+    });
 
-  /**
-   * The memory is refreshed on ticks, and `timeupdate` is throttled in a background tab — so an
-   * element that stops between ticks stops somewhere the memory never saw. Its own `pause` event
-   * arrives too late to help: by then it already reads as paused. Slot 2's frozen clock is the
-   * only record of those last seconds.
-   */
-  it('weighs slot 2 frozen clock when it stopped past the last tick observed', () => {
-    // Memory says 23 (the last tick), but slot 2 actually ran on to 30 (debate 33).
-    expect(pairPlayhead(video(true, 10), video(true, 30), offsets, 23)).toEqual({ seconds: 33, live: false });
+    it('still lets the remembered position raise a frozen slot 1', () => {
+      expect(pairPlayhead(video(true, 10), video(true, 30), offsets, 20)).toEqual({ seconds: 20, live: false });
+    });
   });
 
   /**
-   * ...but only once slot 2 has actually played. A recording that starts after the debate window
-   * has a positive offset, so an untouched slot 2 would otherwise read as being that far in.
+   * Off screen the picture inverts: the browser stops whichever element it considers silent, so
+   * slot 1's clock can be frozen at an arbitrary past instant while slot 2 carries the debate on.
    */
-  it('ignores a slot 2 that has never played, offset and all', () => {
-    expect(pairPlayhead(video(true, 0), video(true, 0), offsets)).toEqual({ seconds: 1, live: false });
-  });
-
-  /** Never backwards: a memory behind the frozen clock is the stale one. */
-  it('keeps the frozen clock when it is ahead of the remembered position', () => {
-    expect(pairPlayhead(video(true, 40), video(true, 5), offsets, 12)).toEqual({ seconds: 41, live: false });
-  });
-
-  /** A running element always wins over the memory — that is what keeps a scrub honest. */
-  it('ignores the remembered position while something is running', () => {
-    expect(pairPlayhead(video(false, 5), video(true, 20), offsets, 90)).toEqual({ seconds: 6, live: true });
+  describe('with trustSecondary (a backgrounded tab)', () => {
+    it('reads the element still running when slot 1 is the one that stopped', () => {
+      // Slot 1 frozen at 10 (debate 11) while slot 2 has reached 20 (debate 23).
+      expect(pairPlayhead(video(true, 10), video(false, 20), offsets, null, true)).toEqual({
+        seconds: 23,
+        live: true,
+      });
+    });
+
+    /**
+     * The sequence with no tick in between: slot 1 stops, slot 2 plays on, slot 2 stops too.
+     * `timeupdate` is throttled in a background tab, so slot 2 stops somewhere the record never
+     * saw, and its own `pause` arrives when it already reads as paused. Its frozen clock is the
+     * only evidence left.
+     */
+    it('weighs slot 2 frozen clock when it stopped past the last position recorded', () => {
+      expect(pairPlayhead(video(true, 10), video(true, 30), offsets, 23, true)).toEqual({
+        seconds: 33,
+        live: false,
+      });
+    });
+
+    /**
+     * ...but only once slot 2 has actually played. A recording that starts after the debate
+     * window has a positive offset, so an untouched slot 2 would otherwise read as being that far
+     * into the debate.
+     */
+    it('ignores a slot 2 that has never played, offset and all', () => {
+      expect(pairPlayhead(video(true, 0), video(true, 0), offsets, null, true)).toEqual({
+        seconds: 1,
+        live: false,
+      });
+    });
+
+    it('keeps the frozen clock when it is ahead of the remembered position', () => {
+      expect(pairPlayhead(video(true, 40), video(true, 5), offsets, 12, true)).toEqual({
+        seconds: 41,
+        live: false,
+      });
+    });
+  });
+
+  /** A running slot 1 always wins over the record — that is what keeps a scrub honest. */
+  it('ignores the remembered position while slot 1 is running', () => {
+    expect(pairPlayhead(video(false, 5), video(true, 20), offsets, 90, true)).toEqual({ seconds: 6, live: true });
   });
 
   it('survives an element that is not mounted yet', () => {
     expect(pairPlayhead(null, null, offsets)).toEqual({ seconds: 1, live: false });
-    expect(pairPlayhead(null, video(false, 20), offsets)).toEqual({ seconds: 23, live: true });
+    expect(pairPlayhead(null, video(false, 20), offsets, null, true)).toEqual({ seconds: 23, live: true });
   });
 });
 
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index ada829fefd..89d1fa8a8f 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -106,47 +106,49 @@ export type PairPlayhead = {
 /**
  * Where the debate is, in debate-timeline seconds, given the two recordings' own clocks.
  *
- * Slot 1 is the clock. The pair is kept in lockstep, so its position plus its recording offset
- * is the debate's position, and every seek is expressed that way.
+ * Slot 1 is the clock, always, in the foreground. The pair is kept in lockstep, so its position
+ * plus its recording offset is the debate's position, and every seek is expressed that way. Slot 2
+ * is *not* interchangeable with it: it is deliberately allowed to run ahead — the drift nudge puts
+ * it there on purpose, and a stalled slot 1 can leave it far ahead (GEO-2828) — so treating its
+ * clock as the debate's would skip whatever it had got through but the viewer had not heard.
  *
- * The exception is a pair that has been split without anyone deciding to — a browser stopping
- * the element it considers silent once the tab is off screen (GEO-2947). If slot 1 is the one
- * that got stopped, its clock is frozen at wherever it stopped while slot 2 carries on, and
- * reading the debate off it is wrong twice over: the turn never advances, so audio never moves
- * to the next speaker, and the resume on return seeks the pair back to the frozen position,
- * replaying everything the viewer heard in the background.
+ * `trustSecondary` is what turns that off, and it means one specific thing: the pair was stopped
+ * by the browser rather than by us, which happens when the tab is off screen (GEO-2947). There,
+ * slot 1's clock is not canonical at all — it is frozen at whatever instant the browser stopped
+ * the element it considered silent, while slot 2 carried the debate on — so the position has to
+ * be recovered from whatever evidence there is:
  *
- * So: whichever element is actually running is the clock, slot 1 first.
+ *  - whichever element is still running, slot 1 first;
+ *  - then the furthest frozen clock, since a browser does not stop both at the same instant;
+ *  - and `lastRunningSeconds`, the caller's own record, which covers the case where an element
+ *    stopped between the throttled `timeupdate` ticks of a background tab.
  *
- * With neither running there is no clock left to read, and the frozen one can be arbitrarily
- * stale — slot 1 stops, slot 2 plays on for a minute, then slot 2 stops too (or reaches `ended`,
- * which also reads as paused). That is what `lastRunningSeconds` is for: the caller's memory of
- * where the debate had actually got to, which wins over a frozen clock behind it. Callers must
- * reset that memory on a deliberate seek and when the recordings change, or a scrub backwards
- * would be dragged forward by it — `useDebatePlayback` does both.
+ * Slot 2's frozen clock counts only once its `currentTime` shows the recording has played: one
+ * that starts after the debate window has a positive offset, so an untouched slot 2 would
+ * otherwise report being that far into the debate before a frame of it had been shown.
  *
- * The memory alone is not enough either. It is refreshed on ticks, and `timeupdate` is throttled
- * in a background tab — so an element that stops between ticks stops somewhere the memory never
- * saw, and its own `pause` event arrives too late to help (it already reads as paused). Both
- * frozen clocks are therefore weighed alongside it, and the furthest wins.
+ * The caller must reset its record on a deliberate seek and when the recordings change, or a
+ * scrub backwards would be dragged forward by it — `useDebatePlayback` does both.
  *
- * Slot 2's is weighed only once its `currentTime` shows the recording has actually played.
- * A recording that starts after the debate window has a positive offset, so an untouched slot 2
- * would otherwise read as being that far into the debate before a frame of it has been shown.
- *
- * `live` says whether the answer came off a running element, so a caller can keep its memory
+ * `live` says whether the answer came off a running element, so a caller can keep its record
  * current without re-deriving "is either element running" for itself.
  */
 export function pairPlayhead(
   primary: ClockVideo | null,
   secondary: ClockVideo | null,
   offsets: { slot1: number; slot2: number },
-  lastRunningSeconds: number | null = null
+  lastRunningSeconds: number | null = null,
+  trustSecondary = false
 ): PairPlayhead {
   if (primary && !primary.paused) return { seconds: primary.currentTime + offsets.slot1, live: true };
-  if (secondary && !secondary.paused) return { seconds: secondary.currentTime + offsets.slot2, live: true };
+  if (trustSecondary && secondary && !secondary.paused) {
+    return { seconds: secondary.currentTime + offsets.slot2, live: true };
+  }
+
   const candidates = [(primary?.currentTime ?? 0) + offsets.slot1];
-  if (secondary && secondary.currentTime > 0) candidates.push(secondary.currentTime + offsets.slot2);
+  if (trustSecondary && secondary && secondary.currentTime > 0) {
+    candidates.push(secondary.currentTime + offsets.slot2);
+  }
   if (lastRunningSeconds !== null) candidates.push(lastRunningSeconds);
   return { seconds: Math.max(...candidates), live: false };
 }
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index 7388243910..eb4d41e0e0 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -570,6 +570,56 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(result.current.playing).toBe(true);
   });
 
+  /**
+   * Copilot's catch, and the foreground half of it. Slot 2 is *deliberately* allowed to run ahead
+   * — the drift nudge puts it there, and a stalled slot 1 leaves it much further ahead (GEO-2828)
+   * — so an ordinary pause must resume from slot 1's canonical clock. Recovering the furthest
+   * position is for a pair the browser stopped off screen, and must not leak into this.
+   */
+  it('resumes a deliberate pause from slot 1, not from a slot 2 that ran ahead', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    slot1.currentTime = 20;
+    slot2.currentTime = 26; // nudged ahead, or running on through a slot 1 stall
+    act(() => result.current.onPlaybackTick());
+
+    act(() => result.current.togglePlayback()); // the viewer pauses
+    expect(result.current.userPaused).toBe(true);
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBeCloseTo(20, 1);
+    expect(slot2.currentTime).toBeCloseTo(20, 1); // dragged back into step, not left ahead
+  });
+
+  /** Same for a card scrolled out of view and back — `suspend` is not a browser stop either. */
+  it('resumes a scrolled-away card from slot 1, not from a slot 2 that ran ahead', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    slot1.currentTime = 20;
+    slot2.currentTime = 26;
+    act(() => result.current.onPlaybackTick());
+
+    act(() => result.current.suspend());
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBeCloseTo(20, 1);
+    expect(slot2.currentTime).toBeCloseTo(20, 1);
+  });
+
   /**
    * The counterweight to that memory: it must never drag a deliberate move forward. A scrub back
    * to 10s after playing to 25s has to stay at 10s, not be "corrected" to the furthest point.
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 7085ad7c6c..af88ad7a00 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -308,12 +308,21 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       pendingSeekSecondsRef.current = null;
     }
 
-    // Slot 1 is the clock — except when it is the element a hidden tab stopped, in which case
-    // its clock is frozen and slot 2 is carrying the debate, and except when both have been
-    // stopped, where only our own memory of the position is left. See `pairPlayhead`.
-    const position = pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current);
+    // Hoisted above the playhead read, which depends on it: off screen, which element's clock
+    // counts as the debate's is a different question than it is in the foreground.
+    const hidden = documentIsHidden();
+
+    // Slot 1 is the clock. Off screen it may not be — the browser stops whichever element it
+    // considers silent, freezing that clock while the other carries on — so there, and only
+    // there, slot 2 and the remembered position are evidence too. In the foreground slot 2 is
+    // deliberately allowed to run ahead (the drift nudge, and further still while slot 1 stalls),
+    // so trusting it would resume past audio the viewer never heard. See `pairPlayhead`.
+    const position = pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current, hidden);
     const playhead = clampSeconds(position.seconds, timelineSeconds);
-    if (position.live) lastRunningPlayheadRef.current = playhead;
+    // Off screen, record it whether or not it came off a running element: this tick may be the
+    // `pause` event of the last element still going, and its final position is not observable
+    // anywhere else. `playhead` already folds the previous record in, so this cannot go backwards.
+    if (position.live || hidden) lastRunningPlayheadRef.current = playhead;
     setPlayheadSeconds(playhead);
 
     // Lock slot 2 to slot 1, offset by the gap between when the two recordings started, so
@@ -338,7 +347,6 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // kept for a gap too large to close that way.
     const syncDelta = offsets.slot2 - offsets.slot1;
     const now = Date.now();
-    const hidden = documentIsHidden();
     // Both corrections below assume the pair's play/pause states are the settled result of a
     // decision — ours or the viewer's. Two situations break that assumption, and in both the
     // right move is to leave the elements alone rather than to "fix" them: a hidden tab, where
@@ -493,6 +501,9 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // element's clock, not slot 1's unconditionally: a resume on return from a backgrounded tab
     // is exactly the case where slot 1 may be the one the browser stopped, and seeking to its
     // frozen position would rewind the debate over everything just heard (GEO-2947).
+    // No `trustSecondary` here: this runs in the foreground (the reconcile fires on the way back
+    // *to* visible), where slot 1 is canonical. Anything learnt while the tab was away is already
+    // in `lastRunningPlayheadRef`, put there by the ticks that ran while it was hidden.
     seekVideosTo(
       clampSeconds(
         pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current).seconds,
@@ -609,22 +620,50 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
    * too. Accepted deliberately: the ticket is about background listening, the feed autoplays
    * muted, and the alternative is to keep a debate stopped for the far commoner reason.
    */
-  const backgroundIntentRef = React.useRef<{ shouldBePlaying: boolean; resumeBoth: () => Promise<void> }>({
+  /**
+   * Work out where the debate actually got to while the tab was away, and record it.
+   *
+   * Reads with `trustSecondary`, which nothing else in the foreground does. This is the one moment
+   * where it is right: the pair has just come back from being stopped by the browser rather than
+   * by us, so a frozen slot 1 is evidence of nothing but the instant it was stopped, and slot 2's
+   * clock may be the only record of the last seconds played. An ordinary pause or scroll-away must
+   * never reach this — there slot 2 is ahead on purpose and resuming from it would skip audio —
+   * which is exactly why it lives here rather than inside `resumeBoth`.
+   *
+   * The ticks that ran while hidden will usually have recorded this already (a browser pausing an
+   * element fires `pause`, and that is wired to `onPlaybackTick`). This does not depend on their
+   * having done so.
+   */
+  const recoverBackgroundPlayhead = React.useCallback(() => {
+    const primaryVideo = slot1VideoRef.current;
+    const secondaryVideo = slot2VideoRef.current;
+    if (!primaryVideo || !secondaryVideo) return;
+    const position = pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current, true);
+    lastRunningPlayheadRef.current = clampSeconds(position.seconds, timelineSeconds);
+  }, [offsets, timelineSeconds]);
+
+  const backgroundIntentRef = React.useRef<{
+    shouldBePlaying: boolean;
+    resumeBoth: () => Promise<void>;
+    recoverBackgroundPlayhead: () => void;
+  }>({
     shouldBePlaying: false,
     resumeBoth,
+    recoverBackgroundPlayhead,
   });
   React.useEffect(() => {
     backgroundIntentRef.current = {
       shouldBePlaying: playing && !userPaused && !isScrubbing && !playbackEnded,
       resumeBoth,
+      recoverBackgroundPlayhead,
     };
-  }, [isScrubbing, playbackEnded, playing, resumeBoth, userPaused]);
+  }, [isScrubbing, playbackEnded, playing, recoverBackgroundPlayhead, resumeBoth, userPaused]);
 
   React.useEffect(() => {
     if (typeof document === 'undefined') return;
     const reconcile = () => {
       if (documentIsHidden()) return;
-      const { shouldBePlaying, resumeBoth: resume } = backgroundIntentRef.current;
+      const { shouldBePlaying, resumeBoth: resume, recoverBackgroundPlayhead: recover } = backgroundIntentRef.current;
       if (!shouldBePlaying) return;
       const primaryVideo = slot1VideoRef.current;
       const secondaryVideo = slot2VideoRef.current;
@@ -632,6 +671,9 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       // Both still running — the tab was backgrounded and the browser let it be. Nothing to do,
       // and calling resumeBoth here would seek a pair that is already in step.
       if (!primaryVideo.paused && !secondaryVideo.paused) return;
+      // Where the debate got to has to be settled while the stopped clocks can still be read; the
+      // resume then realigns to it like any other.
+      recover();
       void resume();
     };
     document.addEventListener('visibilitychange', reconcile);

From 4e3894a09599461d755f55866aeaf8498b0e8bce Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 18:11:06 -0700
Subject: [PATCH 08/13] fix(debates): let a cancelled resume cancel the retry,
 not just its writes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`playBothWithMutedFallback` spends most of its runtime asleep confirming a
start, so a pause, a scrub or a scroll-away lands in that window as a
matter of course. When it does, the first attempt reports failure, and the
function then force-mutes both elements and calls `play()` again — putting
a pair the viewer had just paused back on screen, muted, under a UI
showing paused.

The generation check in `resumeBoth` could not catch this. It runs after
the function returns, by which point the retry's `play()` has already
happened; all it could do was suppress the state writes describing it.

So cancellation now reaches inside. The caller passes its generation check
as `isCancelled`, and the function asks before the retry — the one point
where it starts something it did not start. A cancelled attempt reports
`cancelled` rather than folding into `blocked`, so a future caller cannot
read a superseded attempt as a failed one, or as a start.
---
 apps/web/core/debates/playback-utils.test.ts  | 34 ++++++++++-
 apps/web/core/debates/playback-utils.ts       | 26 ++++++++-
 .../core/debates/use-debate-playback.test.tsx | 56 +++++++++++++++++++
 apps/web/core/debates/use-debate-playback.ts  | 14 ++++-
 4 files changed, 123 insertions(+), 7 deletions(-)

diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index 0f041ecb5b..649cfbf0d7 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -280,7 +280,7 @@ describe('playBothWithMutedFallback (GEO-2783)', () => {
       b.tick();
     };
 
-    expect(await playBothWithMutedFallback(a, b, wait)).toBe('playing');
+    expect(await playBothWithMutedFallback(a, b, { wait })).toBe('playing');
     // The point of the fix: no muted retry, because it was never actually blocked.
     expect([a.plays, b.plays]).toEqual([1, 1]);
   });
@@ -294,7 +294,7 @@ describe('playBothWithMutedFallback (GEO-2783)', () => {
     };
 
     // Both already muted, so there is no fallback to try — this must not be reported as playing.
-    expect(await playBothWithMutedFallback(a, b, wait)).toBe('blocked');
+    expect(await playBothWithMutedFallback(a, b, { wait })).toBe('blocked');
   });
 
   it('plays straight away when the browser allows it', async () => {
@@ -380,6 +380,36 @@ describe('playBothWithMutedFallback (GEO-2783)', () => {
     expect(b.muted).toBe(true);
   });
 
+  /**
+   * The retry is the only point where this function starts something it did not start, and it is
+   * reached after a confirm window it spent asleep — so a pause or a scroll-away routinely lands
+   * in between. A caller that checks ownership only once this returns is too late: `play()` has
+   * already been called, and no state check can take it back.
+   */
+  it('does not retry when the attempt was cancelled while confirming', async () => {
+    const a = fakeVideo({ muted: false });
+    const b = fakeVideo({ muted: false });
+
+    expect(await playBothWithMutedFallback(a, b, { isCancelled: () => true })).toBe('cancelled');
+
+    expect(a.plays).toBe(1); // the first attempt only — no restart behind the viewer's pause
+    expect(b.plays).toBe(1);
+    expect(a.paused).toBe(true);
+    expect(b.paused).toBe(true);
+    expect(a.muted).toBe(false); // and nothing was force-muted for a retry that never ran
+  });
+
+  /** The control: an attempt nobody superseded still retries muted and reports it. */
+  it('still retries when nothing cancelled it', async () => {
+    const a = fakeVideo({ muted: false });
+    const b = fakeVideo({ muted: false });
+
+    expect(await playBothWithMutedFallback(a, b, { isCancelled: () => false })).toBe('playing-muted');
+
+    expect(a.plays).toBe(2);
+    expect(a.muted).toBe(true);
+  });
+
   it('keeps sound when the play is gesture-driven', async () => {
     const a = fakeVideo({ muted: false, blockUnmuted: false });
     const b = fakeVideo({ muted: false, blockUnmuted: false });
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index 89d1fa8a8f..748029523e 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -168,7 +168,23 @@ export function speakerLabel(participant: Pick<DebateParticipant, 'display_name'
 /** The two elements this helper needs, so tests do not have to build a whole `HTMLVideoElement`. */
 export type PlayableVideo = Pick<HTMLVideoElement, 'muted' | 'paused'> & { play: () => Promise<void> };
 
-export type PlayBothOutcome = 'playing' | 'playing-muted' | 'blocked';
+export type PlayBothOutcome = 'playing' | 'playing-muted' | 'blocked' | 'cancelled';
+
+export type PlayBothOptions = {
+  /** Injectable so tests do not wait on real timers. */
+  wait?: (ms: number) => Promise<void>;
+  /**
+   * Has something else taken ownership of these elements since the attempt began?
+   *
+   * This function confirms a start by polling, so it is *asleep* for most of its runtime, and a
+   * pause or a scroll-away lands there routinely. A caller that only checks ownership once this
+   * returns is too late: the retry below would have called `play()` on both elements in the
+   * meantime, leaving a pair the viewer had paused running in the DOM under a UI showing paused
+   * (GEO-2947). Checked before the retry, which is the only point where this function restarts
+   * something it did not start.
+   */
+  isCancelled?: () => boolean;
+};
 
 /**
  * Start both recordings, falling back to muted when the browser blocks unmuted autoplay
@@ -215,8 +231,7 @@ async function bothRunning(
 export async function playBothWithMutedFallback(
   primary: PlayableVideo,
   secondary: PlayableVideo,
-  /** Injectable so tests do not wait on real timers. */
-  wait: (ms: number) => Promise<void> = defaultWait
+  { wait = defaultWait, isCancelled }: PlayBothOptions = {}
 ): Promise<PlayBothOutcome> {
   const attempt = async () => {
     await Promise.allSettled([primary.play(), secondary.play()]);
@@ -225,6 +240,11 @@ export async function playBothWithMutedFallback(
 
   if (await attempt()) return 'playing';
 
+  // Someone paused these, or scrolled them off screen, while the confirm above was polling. The
+  // retry would start them again — and the caller checking ownership after this returns cannot
+  // undo a `play()` that has already happened.
+  if (isCancelled?.()) return 'cancelled';
+
   // Nothing to retry if audio was already off — the block is not the autoplay policy.
   if (primary.muted && secondary.muted) return 'blocked';
 
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index eb4d41e0e0..e139d827e0 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -121,7 +121,14 @@ function fakeVideo() {
     currentTime: 0,
     playbackRate: 1,
     pending: null as null | { resolve: () => void; reject: (reason: unknown) => void },
+    /**
+     * How many times playback has been asked for. The interesting question for a cancelled
+     * attempt is not whether the element ends up paused — a pause that lands after the restart
+     * leaves it paused either way — but whether anything asked it to start again at all.
+     */
+    plays: 0,
     play() {
+      video.plays += 1;
       return new Promise<void>((resolve, reject) => {
         video.pending = { resolve, reject };
       });
@@ -156,6 +163,7 @@ function fakeVideo() {
     },
   };
   return video as unknown as HTMLVideoElement & {
+    plays: number;
     settlePlay: () => void;
     rejectPlay: () => void;
     browserPause: () => void;
@@ -224,6 +232,54 @@ describe('useDebatePlayback — an interrupted resume must not report failure (G
     expect(result.current.error).toBeNull();
   });
 
+  /**
+   * The generation check suppresses state writes, but it runs after the helper returns — and by
+   * then the helper's muted retry has already called `play()` on both elements. A viewer who
+   * paused mid-confirm got the videos back a moment later, muted, under a UI showing paused
+   * (GEO-2947). Cancellation has to reach inside the helper, not just guard what comes after it.
+   */
+  it('does not restart the videos when the viewer grabs the scrubber mid-resume', async () => {
+    const { result, slot1, slot2 } = await mounted();
+    // Unmuted, so the helper would otherwise take its force-mute-and-retry path.
+    slot1.muted = false;
+    slot2.muted = false;
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      result.current.beginScrub(); // the viewer grabs the scrubber, mid-confirm
+      await new Promise(resolve => setTimeout(resolve, 400));
+    });
+
+    // One `play()` each — the attempt that was already under way. The muted retry must not have
+    // asked for a second, because nothing after it can take that back.
+    expect(slot1.plays).toBe(1);
+    expect(slot2.plays).toBe(1);
+    expect(slot1.paused).toBe(true);
+    expect(slot2.paused).toBe(true);
+    expect(result.current.error).toBeNull();
+  });
+
+  /** Same for a card scrolled off screen mid-confirm — `suspend` takes ownership too. */
+  it('does not restart the videos when the card is scrolled away mid-resume', async () => {
+    const { result, slot1, slot2 } = await mounted();
+    slot1.muted = false;
+    slot2.muted = false;
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      result.current.suspend();
+      await new Promise(resolve => setTimeout(resolve, 400));
+    });
+
+    expect(slot1.plays).toBe(1);
+    expect(slot2.plays).toBe(1);
+    expect(slot1.paused).toBe(true);
+    expect(slot2.paused).toBe(true);
+    expect(result.current.playing).toBe(false);
+  });
+
   /** And the guard must not swallow a real block — the autoplay-policy error still surfaces. */
   it('still surfaces a genuine failure to start', async () => {
     const { result, slot1, slot2 } = await mounted();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index af88ad7a00..ecc9583c95 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -521,7 +521,14 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     setIsResuming(true);
     let outcome: PlayBothOutcome;
     try {
-      outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo);
+      outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo, {
+        // The helper spends most of its runtime asleep confirming, and a pause, a scrub or a
+        // scroll-away lands in that window routinely. Bumping the generation is how all of those
+        // say "these elements are mine now", so it is the cancellation signal — checked inside,
+        // before the muted retry, because by the time this returns the retry's `play()` has
+        // already happened and no state check here can take it back.
+        isCancelled: () => resumeGenerationRef.current !== generation,
+      });
     } finally {
       resumesInFlightRef.current--;
       // Only the last one out: overlapping attempts are normal here, and the renderer must not
@@ -530,7 +537,10 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     }
     // Superseded while we waited — something else owns these elements now. Every write below
     // would describe a playback attempt that no longer exists, including the 'blocked' error,
-    // which at this point only means "someone paused us mid-confirm".
+    // which at this point only means "someone paused us mid-confirm". 'cancelled' is the same
+    // thing noticed from inside, and is spelled out rather than left to the generation check so
+    // that a future caller cannot accidentally read it as a successful start.
+    if (outcome === 'cancelled') return;
     if (resumeGenerationRef.current !== generation) return;
     if (outcome === 'blocked') {
       primaryVideo.pause();

From bbdaf4c8fc249f4e1265c68d37e29d35b1a0582e Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 18:37:46 -0700
Subject: [PATCH 09/13] fix(debates): come back from a backgrounded tab in the
 state the debate is in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`playheadSeconds`, `playing` and `turnState` are maintained by ticks, and
ticks are exactly what a background tab throttles — so on the way back
they can still describe a debate that is halfway through and running when
it has in fact finished. The reconcile already worked out the true
position for its own purposes, then resumed on the stale state anyway.

That resume is wrong twice over: there is nothing left to play, and
`play()` on an element sitting at its end is defined to start it again
from the beginning, so the viewer returns to the debate replaying itself —
or to a "could not play both videos" for a start that was never going to
happen.

The recovery now publishes what it works out rather than keeping it to
itself, so the scrubber, the active speaker and `playbackEnded` all come
back current, and it reports whether there is anything left to resume. At
the end of the timeline it lands in the finished state instead — the one
the ticks would have reached had they been allowed to run — so the viewer
comes back to a replay control rather than a restart.

The end-of-timeline epsilon that `playbackEnded` uses is now a named
constant shared with the recovery, so the two cannot disagree about
whether a debate is over.
---
 .../core/debates/use-debate-playback.test.tsx | 56 +++++++++++++++++++
 apps/web/core/debates/use-debate-playback.ts  | 40 ++++++++++---
 2 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index e139d827e0..745b1601a8 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -701,6 +701,62 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(slot2.currentTime).toBeCloseTo(10, 1);
   });
 
+  /**
+   * A debate that finished while the tab was away must come back finished.
+   *
+   * `playheadSeconds`, `playing` and `playbackEnded` are maintained by ticks, and ticks are what a
+   * background tab throttles — so on the way back they can all still say "playing, halfway
+   * through". Resuming on that would be wrong twice over: there is nothing left to play, and
+   * `play()` on an element sitting at its end is defined to start it again from the beginning, so
+   * the viewer returns to the debate replaying itself.
+   */
+  it('comes back finished when the debate ended while the tab was away', async () => {
+    const { result, slot1, slot2 } = await playing();
+    const playsBefore = slot1.plays;
+
+    visibilityState = 'hidden';
+    // Both recordings run out (60s of timeline, 30s a turn) with no tick observing it.
+    slot1.currentTime = 60;
+    slot2.currentTime = 60;
+    slot1.browserPause();
+    slot2.browserPause();
+
+    await act(async () => {
+      setVisibility('visible');
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.plays).toBe(playsBefore); // nothing asked it to start again
+    expect(slot2.plays).toBe(playsBefore);
+    expect(result.current.playing).toBe(false);
+    expect(result.current.playbackEnded).toBe(true); // so the replay control is offered
+    expect(result.current.error).toBeNull();
+  });
+
+  /** The control: a debate stopped part-way through still resumes, as before. */
+  it('still resumes a debate that was only part-way through', async () => {
+    const { result, slot1, slot2 } = await playing();
+    const playsBefore = slot1.plays;
+
+    visibilityState = 'hidden';
+    slot1.currentTime = 30;
+    slot2.currentTime = 30;
+    slot1.browserPause();
+    slot2.browserPause();
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.plays).toBeGreaterThan(playsBefore);
+    expect(result.current.playing).toBe(true);
+    expect(result.current.playbackEnded).toBe(false);
+  });
+
   /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
   it('does not touch a pair that kept playing while the tab was hidden', async () => {
     const { result, slot1, slot2 } = await playing();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index ecc9583c95..6d036678ff 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -54,6 +54,11 @@ const MIN_BACKGROUND_RESTART_INTERVAL_MS = 2_000;
 const STALL_AFTER_MS = 500;
 /** Progress smaller than this is float noise on `currentTime`, not playback. */
 const STALL_EPSILON_SECONDS = 0.001;
+/**
+ * How close to the timeline's end counts as the end. Shared by `playbackEnded` and the
+ * background recovery, so the two cannot disagree about whether a debate has finished.
+ */
+const PLAYBACK_END_EPSILON_SECONDS = 0.05;
 
 /**
  * Is this tab off screen?
@@ -591,7 +596,8 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
   );
 
   const ready = Boolean(urls.slot1 && urls.slot2);
-  const playbackEnded = ready && timelineSeconds > 0 && playheadSeconds >= timelineSeconds - 0.05;
+  const playbackEnded =
+    ready && timelineSeconds > 0 && playheadSeconds >= timelineSeconds - PLAYBACK_END_EPSILON_SECONDS;
 
   const togglePlayback = React.useCallback(() => {
     if (playing) {
@@ -647,15 +653,34 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
   const recoverBackgroundPlayhead = React.useCallback(() => {
     const primaryVideo = slot1VideoRef.current;
     const secondaryVideo = slot2VideoRef.current;
-    if (!primaryVideo || !secondaryVideo) return;
+    if (!primaryVideo || !secondaryVideo) return false;
     const position = pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current, true);
-    lastRunningPlayheadRef.current = clampSeconds(position.seconds, timelineSeconds);
+    const recovered = clampSeconds(position.seconds, timelineSeconds);
+    lastRunningPlayheadRef.current = recovered;
+
+    // Publish it, not just remember it. `playheadSeconds` is React state that only ticks maintain,
+    // and ticks are exactly what a background tab throttles — so on the way back it can be a
+    // whole hidden period out of date, and everything read off it with it: the scrubber, the
+    // active speaker, and `playbackEnded`.
+    setPlayheadSeconds(recovered);
+
+    if (recovered < timelineSeconds - PLAYBACK_END_EPSILON_SECONDS) return false;
+
+    // The debate finished while the tab was away. Resuming here would be wrong twice over: there
+    // is nothing left to play, and `play()` on an element sitting at its end is defined to start
+    // it again from the beginning — so the viewer would come back to the debate replaying itself,
+    // or to a spurious "could not play" (GEO-2947). Land in the finished state instead, which is
+    // the one the ticks would have reached had they been allowed to run.
+    setPlaying(false);
+    setTurnState(null);
+    return true;
   }, [offsets, timelineSeconds]);
 
   const backgroundIntentRef = React.useRef<{
     shouldBePlaying: boolean;
     resumeBoth: () => Promise<void>;
-    recoverBackgroundPlayhead: () => void;
+    /** @returns true when the debate finished while the tab was away — nothing to resume. */
+    recoverBackgroundPlayhead: () => boolean;
   }>({
     shouldBePlaying: false,
     resumeBoth,
@@ -678,12 +703,13 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       const primaryVideo = slot1VideoRef.current;
       const secondaryVideo = slot2VideoRef.current;
       if (!primaryVideo || !secondaryVideo) return;
+      // Settle where the debate got to *first*, and unconditionally: the state this reads from
+      // is maintained by ticks, and a throttled background tab is precisely where ticks did not
+      // run. That includes the case the resume must not happen at all.
+      if (recover()) return;
       // Both still running — the tab was backgrounded and the browser let it be. Nothing to do,
       // and calling resumeBoth here would seek a pair that is already in step.
       if (!primaryVideo.paused && !secondaryVideo.paused) return;
-      // Where the debate got to has to be settled while the stopped clocks can still be read; the
-      // resume then realigns to it like any other.
-      recover();
       void resume();
     };
     document.addEventListener('visibilitychange', reconcile);

From 05d6ff4e1e440dadb4f28c66e0fb8d4aee936f4d Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 18:54:46 -0700
Subject: [PATCH 10/13] fix(debates): move the turn with the recovered
 playhead, from one derivation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The background recovery published a new playhead but left `turnState`
alone, and `turnState` is what `audible` reads. A pair the browser let run
through a turn boundary while the tab was hidden therefore came back with
the volume still on the debater who had stopped speaking — the reconcile
returns early in that case, so nothing else corrected it until a later
media tick happened to.

The turn is now derived from the recovered position like every other
consumer of it. And "every other consumer" is the point: four call sites
were binding the same debate metadata to `turnStateForTime` by hand, which
is how the recovery came to move one without the other. They share one
`turnAt` now, so a playhead that moves takes the turn with it by
construction rather than by everyone remembering.
---
 .../core/debates/use-debate-playback.test.tsx | 30 ++++++++++++++++
 apps/web/core/debates/use-debate-playback.ts  | 34 ++++++++++++++-----
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index 745b1601a8..a80b7fa9f8 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -757,6 +757,36 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(result.current.playbackEnded).toBe(false);
   });
 
+  /**
+   * The case where nothing needed resuming at all: the browser let both videos run while the tab
+   * was hidden, and they crossed a turn boundary in there. `turnState` is separate state that
+   * only ticks maintain, and it is what `audible` reads — so without deriving it from the
+   * recovered playhead the pair comes back with the volume still on the debater who stopped
+   * speaking, until some later media tick happens to correct it.
+   */
+  it('moves the turn to the new speaker when a boundary passed while the tab was hidden', async () => {
+    const { result, slot1, slot2 } = await playing();
+    act(() => result.current.onPlaybackTick()); // establishes slot 1's turn, as a live tick would
+    expect(result.current.turnState?.slot).toBe(1);
+
+    visibilityState = 'hidden';
+    // Both keep playing, straight through the 30s boundary into slot 2's turn.
+    slot1.currentTime = 40;
+    slot2.currentTime = 40;
+
+    await act(async () => {
+      setVisibility('visible');
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(result.current.turnState?.slot).toBe(2);
+    expect(result.current.activeSlot).toBe(2);
+    // Nothing was stopped, so nothing should have been restarted or seeked.
+    expect(slot1.paused).toBe(false);
+    expect(slot2.paused).toBe(false);
+    expect(slot1.currentTime).toBeCloseTo(40, 1);
+  });
+
   /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
   it('does not touch a pair that kept playing while the tab was hidden', async () => {
     const { result, slot1, slot2 } = await playing();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 6d036678ff..1de2e01c3a 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -189,12 +189,23 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     [debate.started_at, slot1StartedAtMs, slot2StartedAtMs]
   );
 
+  /**
+   * Whose turn it is at a given debate-timeline position.
+   *
+   * Every caller binds the same two pieces of debate metadata, and this is one function rather
+   * than four call sites because they have already drifted apart once: the background recovery
+   * published a new playhead without deriving the turn from it, which left the audio assigned to
+   * whoever was speaking before the tab was hidden (GEO-2947). Anywhere the playhead moves, the
+   * turn moves with it, and that is easier to keep true with a single derivation.
+   */
+  const turnAt = React.useCallback(
+    (seconds: number) => turnStateForTime(debate.first_participant_slot, turnDurations, seconds),
+    [debate.first_participant_slot, turnDurations]
+  );
+
   // The slot whose turn it is at the current playhead — stable across pause, so
   // the speaker stays in colour (and keeps subtitles) when the viewer pauses.
-  const activeSlot = React.useMemo(
-    () => turnStateForTime(debate.first_participant_slot, turnDurations, playheadSeconds)?.slot ?? null,
-    [debate.first_participant_slot, playheadSeconds, turnDurations]
-  );
+  const activeSlot = React.useMemo(() => turnAt(playheadSeconds)?.slot ?? null, [playheadSeconds, turnAt]);
 
   const transcriptQuery = useDebateTranscript(debate.id, 'json', enabled);
   const transcriptSegments = transcriptQuery.data?.segments ?? [];
@@ -448,7 +459,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       return;
     }
 
-    const turn = turnStateForTime(debate.first_participant_slot, turnDurations, playhead);
+    const turn = turnAt(playhead);
     setTurnState(turn);
 
     // The turn moving to an element the browser stopped off screen is the one case where a
@@ -589,7 +600,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       pendingSeekSecondsRef.current = nextTime;
       if (seekVideosTo(nextTime)) pendingSeekSecondsRef.current = null;
       setPlayheadSeconds(nextTime);
-      setTurnState(turnStateForTime(debate.first_participant_slot, turnDurations, nextTime));
+      setTurnState(turnAt(nextTime));
       window.requestAnimationFrame(updateTurnState);
     },
     [debate.first_participant_slot, seekVideosTo, timelineSeconds, turnDurations, updateTurnState]
@@ -664,7 +675,14 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // active speaker, and `playbackEnded`.
     setPlayheadSeconds(recovered);
 
-    if (recovered < timelineSeconds - PLAYBACK_END_EPSILON_SECONDS) return false;
+    if (recovered < timelineSeconds - PLAYBACK_END_EPSILON_SECONDS) {
+      // The turn moves with the playhead. It is separate state rather than derived, and it is
+      // what `audible` reads — so a pair that kept playing across a turn boundary while hidden
+      // would otherwise come back with the volume still on the debater who had stopped speaking,
+      // until the next media tick happened to correct it.
+      setTurnState(turnAt(recovered));
+      return false;
+    }
 
     // The debate finished while the tab was away. Resuming here would be wrong twice over: there
     // is nothing left to play, and `play()` on an element sitting at its end is defined to start
@@ -674,7 +692,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     setPlaying(false);
     setTurnState(null);
     return true;
-  }, [offsets, timelineSeconds]);
+  }, [offsets, timelineSeconds, turnAt]);
 
   const backgroundIntentRef = React.useRef<{
     shouldBePlaying: boolean;

From 42d537a4aca7ee41f65e20aa11a6accb4c655000 Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 19:08:20 -0700
Subject: [PATCH 11/13] fix(debates): depend on the turn derivation, not on
 what it is built from
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`updateTurnState` and `seekBoth` call `turnAt` but listed the debate
metadata `turnAt` happens to close over. That is correct only by
coincidence — `turnAt` changes identity exactly when those two values do —
and the coincidence ends the moment `turnAt` gains a dependency, at which
point both callbacks go stale without anything saying so. Centralising the
derivation last commit is worth little if its callers still reach around
it.

Nothing here is enforced: this project's eslint config pulls
`eslint-config-next/typescript` rather than the full preset, so
`react-hooks/exhaustive-deps` is not enabled and a stale dependency list
lints clean. Running the rule ad hoc over the changed files reports
nothing further; the one finding it does make, on `transcriptSegments`,
predates this branch and is an over-invalidation rather than a staleness
bug.

`seekVideosTo` named `offsets.slot1` and `offsets.slot2` where every other
consumer names `offsets`; same object, one fewer way for a third field to
be added without its dependency following.
---
 apps/web/core/debates/use-debate-playback.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 1de2e01c3a..aec1fbf5ec 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -202,6 +202,11 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     (seconds: number) => turnStateForTime(debate.first_participant_slot, turnDurations, seconds),
     [debate.first_participant_slot, turnDurations]
   );
+  // Callers depend on `turnAt` itself, never on the metadata it is built from. Listing its
+  // internals instead happens to work today — it changes identity exactly when they do — but it
+  // is a coincidence that the next dependency added here would break, silently. Worth stating
+  // because nothing checks it: this project's eslint config pulls `eslint-config-next/typescript`
+  // only, so `react-hooks/exhaustive-deps` is not enabled and a stale dependency list lints clean.
 
   // The slot whose turn it is at the current playhead — stable across pause, so
   // the speaker stays in colour (and keeps subtitles) when the viewer pauses.
@@ -313,7 +318,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       lastSyncSeekAtRef.current = Date.now();
       return true;
     },
-    [offsets.slot1, offsets.slot2]
+    [offsets]
   );
 
   const updateTurnState = React.useCallback(() => {
@@ -494,7 +499,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
         });
       }
     }
-  }, [debate.first_participant_slot, offsets, seekVideosTo, timelineSeconds, turnDurations]);
+  }, [offsets, seekVideosTo, timelineSeconds, turnAt]);
 
   const pauseBoth = React.useCallback(() => {
     // Supersede any resume still confirming, so it cannot un-pause the viewer.
@@ -603,7 +608,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       setTurnState(turnAt(nextTime));
       window.requestAnimationFrame(updateTurnState);
     },
-    [debate.first_participant_slot, seekVideosTo, timelineSeconds, turnDurations, updateTurnState]
+    [seekVideosTo, timelineSeconds, turnAt, updateTurnState]
   );
 
   const ready = Boolean(urls.slot1 && urls.slot2);

From 65070f983478c933b579e1531fdf66484943eb3a Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Thu, 17 Sep 2026 21:15:29 -0700
Subject: [PATCH 12/13] fix(debates): stand the drift correction down
 mid-resume, as intended
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The in-flight guard was supposed to cover both corrections in
`updateTurnState`, and a commit message and PR comment said it did. Only
the split-pair check ever got it; the drift correction still ran whenever
the tab was visible.

It matters for the same reason the other one did. A resume is a split pair
by construction — slot 2, the cue-less WebM, is routinely the later of the
two to start — so a tick landing in the confirm window sees a gap that is
not drift and answers it by nudging, or hard-seeking, the element that is
still trying to begin. On these files a seek is a parse walk (GEO-2828),
so the correction competes with the start it is meant to be helping.

The guard was written but never applied: the edit matched the condition as
it had been before Prettier wrapped it across lines, so it replaced
nothing and said nothing. Worth naming, because the same silence is what
let it survive three rounds of review of the surrounding code.
---
 .../core/debates/use-debate-playback.test.tsx | 46 +++++++++++++++++++
 apps/web/core/debates/use-debate-playback.ts  | 10 ++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index a80b7fa9f8..38ab1e44a3 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -280,6 +280,52 @@ describe('useDebatePlayback — an interrupted resume must not report failure (G
     expect(result.current.playing).toBe(false);
   });
 
+  /**
+   * The drift correction has the same reason to stand down mid-resume as the split-pair check
+   * did, and for a while it did not. A resume is a split pair by construction — slot 2, the
+   * cue-less WebM, is routinely the later of the two to start — so a tick landing in the confirm
+   * window sees a gap that is not drift and answers it by nudging (or hard-seeking) the element
+   * that is still trying to begin, which on these files means a parse walk competing with the
+   * start it is meant to help (GEO-2828).
+   */
+  it('does not correct drift against a video that is still starting', async () => {
+    const { result, slot1, slot2 } = await mounted();
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      // Slot 1 is up and has played on; slot 2 is still parsing, so it reads far "behind".
+      slot1.settlePlay();
+      slot1.currentTime = 10;
+      slot2.currentTime = 0;
+      result.current.onPlaybackTick();
+      await Promise.resolve();
+    });
+
+    // Left alone: not dragged to slot 1's position, and not put on a corrective rate.
+    expect(slot2.currentTime).toBe(0);
+    expect(slot2.playbackRate).toBe(1);
+  });
+
+  /** The control: once the resume has settled, ordinary drift is corrected as before. */
+  it('still corrects drift once the resume has settled', async () => {
+    const { result, slot1, slot2 } = await mounted();
+
+    await act(async () => {
+      void result.current.resumeBoth();
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    slot1.currentTime = 10;
+    slot2.currentTime = 9.5; // beyond the nudge threshold, inside the seek one
+    act(() => result.current.onPlaybackTick());
+
+    expect(slot2.playbackRate).not.toBe(1);
+  });
+
   /** And the guard must not swallow a real block — the autoplay-policy error still surfaces. */
   it('still surfaces a genuine failure to start', async () => {
     const { result, slot1, slot2 } = await mounted();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index aec1fbf5ec..309d33074a 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -368,11 +368,15 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // kept for a gap too large to close that way.
     const syncDelta = offsets.slot2 - offsets.slot1;
     const now = Date.now();
-    // Both corrections below assume the pair's play/pause states are the settled result of a
+    // Every correction below assumes the pair's play/pause states are the settled result of a
     // decision — ours or the viewer's. Two situations break that assumption, and in both the
     // right move is to leave the elements alone rather than to "fix" them: a hidden tab, where
     // the browser stops elements of its own accord, and a resume that has not finished starting
-    // them yet.
+    // them yet. A resume is a split pair by construction, and slot 2 — the cue-less WebM — is
+    // routinely the later of the two to start, so a tick landing there sees a gap that is not
+    // drift and answers it by nudging or hard-seeking the element that is still trying to begin.
+    // On these files a seek is a parse walk (GEO-2828), so that makes the start it is competing
+    // with slower still.
     const pairIsSettled = !hidden && resumesInFlightRef.current === 0;
 
     if (primaryVideo) {
@@ -394,7 +398,7 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     if (
       primaryVideo &&
       secondaryVideo &&
-      !hidden &&
+      pairIsSettled &&
       !primaryVideo.paused &&
       !secondaryVideo.seeking &&
       !primaryStalled

From bc4b21b6657d47ce214cf4aab22df2ac1eed9edb Mon Sep 17 00:00:00 2001
From: Preston Mantel <preston.mantel@gmail.com>
Date: Fri, 18 Sep 2026 09:48:40 -0700
Subject: [PATCH 13/13] =?UTF-8?q?fix(debates):=20address=20Patrick's=20rev?=
 =?UTF-8?q?iew=20=E2=80=94=20ratchet,=20restart=20budget,=20and=20cut=20th?=
 =?UTF-8?q?e=20volume=20gate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**The recovered playhead could walk backwards.** `pairPlayhead` returned a
running slot 1's clock before weighing anything else, so a browser that
stopped slot 1 at debate-time 100 while slot 2 ran on to 130, then handed
slot 1 back un-paused at its frozen 100 — un-suspended, or
un-paused-but-stalled, which `paused === false` cannot tell apart — walked
the record 130 -> 100 and resumed there, dragging slot 2 back over half a
minute the viewer had already heard. Off screen no clock is authoritative
now, running ones included: every piece of evidence is weighed and the
furthest wins. The foreground path is untouched, where a running slot 1 is
still the whole answer.

Fixing the read was not enough: `resumeBoth` re-derived the position the
foreground way and threw the recovered one away. It now takes the position
as an argument, and the reconcile hands over what it settled on. Every
other caller is unchanged.

**The off-screen restart had no give-up.** The two-second floor paced the
attempts but nothing ended them, and the ticks driving them keep arriving
for as long as the other element plays. On a browser that declines to start
a <video> off screen that is a `currentTime` write every two seconds for as
long as the viewer is away — a demuxer parse walk each, on these cue-less
files — on an element that will never start. Five consecutive refusals and
it stops asking; a successful start, or coming back on screen, clears it.

**The volume gate is reverted.** It rested on volume 0 being different from
muted to a browser deciding what to stop off screen. In Blink effective
mute is `muted || volume === 0`, so the listening element was exactly as
stoppable as before while reporting as unmuted to the tab indicator and the
media session — and it pulled in the iOS read-only-volume probe with it.
Per-turn audio is the `muted` flag again, as on master. The `isResuming`
repair stays: the autoplay fallback's mute is invisible to React however
`muted` is computed.

**`timelineSeconds === 0`** now reads the same to the recovery as it does
to `playbackEnded`, which was the point of sharing the epsilon.
---
 .../browse/debate-feed-player.test.tsx        |  82 +-------
 .../debates/browse/debate-feed-player.tsx     |  58 ++----
 apps/web/core/debates/playback-utils.test.ts  |  25 ++-
 apps/web/core/debates/playback-utils.ts       |  34 ++-
 .../core/debates/use-debate-playback.test.tsx |  61 ++++++
 apps/web/core/debates/use-debate-playback.ts  | 195 +++++++++++-------
 6 files changed, 250 insertions(+), 205 deletions(-)

diff --git a/apps/web/core/debates/browse/debate-feed-player.test.tsx b/apps/web/core/debates/browse/debate-feed-player.test.tsx
index 0a4583e0b5..f7a923b54f 100644
--- a/apps/web/core/debates/browse/debate-feed-player.test.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { Debate, DebateParticipant } from '~/core/debates/api';
 import type { DebateVotesResult } from '~/core/debates/use-debate-votes';
@@ -94,90 +94,31 @@ function renderPlayer(overrides: { mutedByUser: boolean; turnSlot: 1 | 2; isResu
 }
 
 /**
- * Per-turn audio is gated with `volume`, not `muted` (GEO-2947): `muted` carries only the
- * viewer's own mute — the same thing `playFromStart` and the autoplay fallback write it for — so
- * the element no longer has two notions of "muted" written to it from two places. It also stops
- * the listening debater's element from looking like a silent video to a backgrounded tab.
+ * Per-turn audio is the `muted` flag: only the debater whose turn it is is audible, and the
+ * viewer's own mute wins over both. Unchanged from master — an attempt to move this gate onto
+ * `volume` was reverted, since Blink's effective mute is `muted || volume === 0`, so a listening
+ * element at volume 0 is exactly as stoppable off screen as a muted one.
  */
-/**
- * iOS Safari: `volume` is read-only. The write is accepted and ignored, and the property stays
- * at 1 — so a component that silences the listening debater with volume alone puts both of them
- * on air at once. jsdom happily honours volume, so the platform has to be stubbed to test it.
- */
-function stubReadOnlyVolume() {
-  const original = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'volume');
-  Object.defineProperty(HTMLMediaElement.prototype, 'volume', {
-    configurable: true,
-    get: () => 1,
-    set: () => {},
-  });
-  return () => {
-    if (original) Object.defineProperty(HTMLMediaElement.prototype, 'volume', original);
-    else Reflect.deleteProperty(HTMLMediaElement.prototype, 'volume');
-  };
-}
-
 describe('DebateFeedPlayer audio gating (GEO-2947)', () => {
   beforeEach(() => {
     mocks.controller = null;
   });
 
-  it('un-mutes both elements once the viewer un-mutes, and gives the turn to the speaker', () => {
+  it('leaves only the speaking debater audible once the viewer un-mutes', () => {
     const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 1 });
 
     expect(slot1.muted).toBe(false);
-    expect(slot2.muted).toBe(false); // not muted — merely silent, so a hidden tab keeps it running
-    expect(slot1.volume).toBe(1);
-    expect(slot2.volume).toBe(0);
-  });
-
-  it('moves the volume with the turn', () => {
-    const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 2 });
-
-    expect(slot1.volume).toBe(0);
-    expect(slot2.volume).toBe(1);
-  });
-
-  it("honours the viewer's mute on both elements", () => {
-    const { slot1, slot2 } = renderPlayer({ mutedByUser: true, turnSlot: 1 });
-
-    expect(slot1.muted).toBe(true);
     expect(slot2.muted).toBe(true);
-    // The turn still moves the volume underneath — `muted` is what silences it, and un-muting
-    // therefore lands the viewer on the speaker rather than on both recordings at once.
-    expect(slot1.volume).toBe(1);
-    expect(slot2.volume).toBe(0);
-  });
-});
-
-describe('DebateFeedPlayer audio gating where volume is read-only (GEO-2947)', () => {
-  let restoreVolume: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreVolume = stubReadOnlyVolume();
-  });
-
-  afterEach(() => {
-    restoreVolume?.();
-    restoreVolume = null;
   });
 
-  /** THE REGRESSION Copilot caught: without the fallback, both debaters are audible on iOS. */
-  it('mutes the listening debater when the volume assignment does not stick', () => {
-    const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 1 });
-
-    expect(slot1.muted).toBe(false); // the speaker is still the one you hear
-    expect(slot2.muted).toBe(true); // ...and the listener is silenced the only way left
-  });
-
-  it('moves that mute with the turn', () => {
+  it('moves the mute with the turn', () => {
     const { slot1, slot2 } = renderPlayer({ mutedByUser: false, turnSlot: 2 });
 
     expect(slot1.muted).toBe(true);
     expect(slot2.muted).toBe(false);
   });
 
-  it("still honours the viewer's own mute on both elements", () => {
+  it("honours the viewer's mute on both elements", () => {
     const { slot1, slot2 } = renderPlayer({ mutedByUser: true, turnSlot: 1 });
 
     expect(slot1.muted).toBe(true);
@@ -185,13 +126,6 @@ describe('DebateFeedPlayer audio gating where volume is read-only (GEO-2947)', (
   });
 });
 
-/**
- * `playBothWithMutedFallback` mutes both elements to retry a blocked play and leaves them muted:
- * it neither knows what this component renders `muted` from, nor holds a value still current
- * after its ~300ms await. React will not repair that on its own — it writes a DOM property only
- * when its *own* previous value differs, and a mute it never made is invisible to it — so without
- * this the element plays audibly under a UI showing muted (GEO-2947).
- */
 describe('DebateFeedPlayer repairs a mute made behind React (GEO-2947)', () => {
   it('re-asserts the rendered mute once the resume is over', () => {
     const { slot1, update } = renderPlayer({ mutedByUser: false, turnSlot: 1, isResuming: true });
diff --git a/apps/web/core/debates/browse/debate-feed-player.tsx b/apps/web/core/debates/browse/debate-feed-player.tsx
index ab25c85ade..57e0c83d8c 100644
--- a/apps/web/core/debates/browse/debate-feed-player.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.tsx
@@ -227,54 +227,30 @@ function DebaterVideo({
   const { openSidePanel } = useEntitySidePanel();
   const name = participant ? speakerLabel(participant) : 'Debater';
 
+  const muted = !audible || mutedByUser;
+
   /**
-   * Whose turn it is decides the *volume*, not the `muted` flag (GEO-2947) — where the platform
-   * lets us, which is not everywhere.
-   *
-   * `muted` carries only the viewer's own mute now; putting the per-turn gate on it too gave the
-   * element two different notions of "muted" written from two places. And a browser is
-   * entitled to stop a <video> it considers silent once the tab is off screen, so muting the
-   * listening debater for the length of a turn is what made one of the pair look stoppable.
-   * Volume 0 is the same silence to a listener without being a mute.
+   * Re-assert the rendered mute after a resume (GEO-2947).
    *
-   * iOS Safari does not allow it. `volume` is read-only there: the write is accepted and ignored,
-   * and the property stays at 1. Since this component also stopped muting the listening element,
-   * that would put *both* debaters on air at once the moment the viewer un-mutes — which is why
-   * the assignment is read back rather than assumed. Where it doesn't stick we mute the listener
-   * exactly as before. Mobile is out of scope for background playback anyway (iOS stops inline
-   * <video> on backgrounding regardless), so falling back costs it nothing it had.
+   * `playBothWithMutedFallback` mutes both elements to retry a blocked play and cannot put them
+   * back: it does not know what this component renders `muted` from, and anything it captured is
+   * a confirm window out of date by the time it could write it. React will not repair that either
+   * — it writes a DOM property only when its *own* previous value differs, and a mute it never
+   * made is invisible to it — so the element would play audibly under a UI showing muted.
    *
-   * Once is enough: it is a platform fact, not a per-turn one, and the first write happens on
-   * mount while the feed is still muted by default — so the fallback is already in place well
-   * before there is any audio to get wrong.
+   * Not while a resume is confirming: the retry depends on the mute it just made, and writing over
+   * it mid-attempt would block the play this is trying to let happen. `isResuming` falling is
+   * itself what runs this effect again, so the repair lands the moment the attempt is over.
    *
-   * Note the speaking element cannot detect it — it asks for volume 1 and reads back 1, which is
-   * indistinguishable from the write having worked. That is exactly right: it is the *listening*
-   * element that needs silencing, and it is the one whose write visibly fails. Each detects it
-   * the first time it has something to lose, and the turn it becomes the listener is that time.
+   * This is why `playFromStart` no longer writes `muted` either. The value it has (`mutedByUser`)
+   * is not the value rendered here, so repairing from the hook moved the divergence rather than
+   * closing it. `muted` has one owner: this render.
    */
-  const [volumeIsWritable, setVolumeIsWritable] = React.useState(true);
-  const muted = mutedByUser || (!volumeIsWritable && !audible);
-
   React.useLayoutEffect(() => {
     const video = videoRef.current;
-    if (!video) return;
-    const wanted = audible ? 1 : 0;
-    video.volume = wanted;
-    if (Math.abs(video.volume - wanted) > 0.01) setVolumeIsWritable(false);
-
-    // `muted` is a rendered prop, but `playBothWithMutedFallback` mutes both elements to retry a
-    // blocked play and cannot put them back (it neither knows what this renders `muted` from nor
-    // holds a value still current after its await). React will not repair that itself — it only
-    // writes a DOM property when its *own* previous value differs, and a mute it never made is
-    // invisible to it — so the element would play audibly under a UI showing muted. Re-assert it
-    // here, where the rendered truth actually lives.
-    //
-    // Not while a resume is confirming: the retry depends on the mute it just made, and writing
-    // over it mid-attempt would block the play this is trying to let happen. `isResuming` falling
-    // is itself what runs this effect again, so the repair lands the moment the attempt is over.
-    if (!isResuming) video.muted = muted;
-  }, [audible, isResuming, muted, src, videoRef]);
+    if (!video || isResuming) return;
+    video.muted = muted;
+  }, [isResuming, muted, src, videoRef]);
 
   // A personal space's own id resolves to its "system entity" (an ugly technical
   // record). The space's page entity is the real profile, so open that once it's
diff --git a/apps/web/core/debates/playback-utils.test.ts b/apps/web/core/debates/playback-utils.test.ts
index 566983fb86..9fd34db830 100644
--- a/apps/web/core/debates/playback-utils.test.ts
+++ b/apps/web/core/debates/playback-utils.test.ts
@@ -307,6 +307,27 @@ describe('pairPlayhead (GEO-2947)', () => {
       });
     });
 
+    /**
+     * THE RATCHET. A browser that stopped slot 1 at debate-time 100 while slot 2 ran on to 130 can
+     * hand slot 1 back un-paused at its frozen 100 — un-suspended, or un-paused-but-stalled, which
+     * `paused === false` cannot tell apart. Reading that as "live, we are at 100" walks the
+     * recovered position backwards over half a minute the viewer already heard, and the resume
+     * drags slot 2 back with it.
+     */
+    it('does not let a running slot 1 walk the position back over a record ahead of it', () => {
+      const slot1 = video(false, 99); // running, frozen behind: debate-time 100
+      const slot2 = video(true, 127); // stopped at debate-time 130
+      expect(pairPlayhead(slot1, slot2, offsets, 130, true)).toEqual({ seconds: 130, live: true });
+    });
+
+    /** Nor over the other element's clock, when there is no record to fall back on. */
+    it('does not let a running slot 1 walk the position back over a stopped slot 2', () => {
+      expect(pairPlayhead(video(false, 99), video(true, 127), offsets, null, true)).toEqual({
+        seconds: 130,
+        live: true,
+      });
+    });
+
     it('keeps the frozen clock when it is ahead of the remembered position', () => {
       expect(pairPlayhead(video(true, 40), video(true, 5), offsets, 12, true)).toEqual({
         seconds: 41,
@@ -315,9 +336,9 @@ describe('pairPlayhead (GEO-2947)', () => {
     });
   });
 
-  /** A running slot 1 always wins over the record — that is what keeps a scrub honest. */
+  /** In the foreground a running slot 1 always wins over the record — that keeps a scrub honest. */
   it('ignores the remembered position while slot 1 is running', () => {
-    expect(pairPlayhead(video(false, 5), video(true, 20), offsets, 90, true)).toEqual({ seconds: 6, live: true });
+    expect(pairPlayhead(video(false, 5), video(true, 20), offsets, 90)).toEqual({ seconds: 6, live: true });
   });
 
   it('survives an element that is not mounted yet', () => {
diff --git a/apps/web/core/debates/playback-utils.ts b/apps/web/core/debates/playback-utils.ts
index 3e7ac4d144..6bbba3ad3a 100644
--- a/apps/web/core/debates/playback-utils.ts
+++ b/apps/web/core/debates/playback-utils.ts
@@ -194,17 +194,35 @@ export function pairPlayhead(
   lastRunningSeconds: number | null = null,
   trustSecondary = false
 ): PairPlayhead {
-  if (primary && !primary.paused) return { seconds: primary.currentTime + offsets.slot1, live: true };
-  if (trustSecondary && secondary && !secondary.paused) {
-    return { seconds: secondary.currentTime + offsets.slot2, live: true };
+  const primarySeconds = (primary?.currentTime ?? 0) + offsets.slot1;
+  const primaryRunning = Boolean(primary && !primary.paused);
+
+  if (!trustSecondary) {
+    // Slot 1 is the clock and a running slot 1 is the whole answer: the record is only there to
+    // raise a *frozen* one. Anything else would drag a scrub backwards forward again.
+    if (primaryRunning) return { seconds: primarySeconds, live: true };
+    return {
+      seconds: lastRunningSeconds === null ? primarySeconds : Math.max(primarySeconds, lastRunningSeconds),
+      live: false,
+    };
   }
 
-  const candidates = [(primary?.currentTime ?? 0) + offsets.slot1];
-  if (trustSecondary && secondary && secondary.currentTime > 0) {
-    candidates.push(secondary.currentTime + offsets.slot2);
-  }
+  // Off screen no clock is authoritative, *including a running one*. A browser that stopped slot 1
+  // at debate-time 100 while slot 2 ran on to 130 can hand slot 1 back un-paused at its frozen 100
+  // — un-suspended, or un-paused-but-stalled, which `paused === false` cannot tell apart and which
+  // is slot 1's documented failure mode (GEO-2828). Returning that 100 as "live" would walk the
+  // recovered position backwards over half a minute the viewer had already heard, and drag slot 2
+  // back with it on the resume. So every piece of evidence is weighed and the furthest wins.
+  const candidates = [primarySeconds];
+  // Slot 2 counts once its clock shows the recording has played: one that starts after the debate
+  // window has a positive offset, so an untouched slot 2 would otherwise report being that far in.
+  if (secondary && secondary.currentTime > 0) candidates.push(secondary.currentTime + offsets.slot2);
   if (lastRunningSeconds !== null) candidates.push(lastRunningSeconds);
-  return { seconds: Math.max(...candidates), live: false };
+
+  return {
+    seconds: Math.max(...candidates),
+    live: primaryRunning || Boolean(secondary && !secondary.paused),
+  };
 }
 
 export function participantForSlot(debate: Debate, slot: ParticipantSlot) {
diff --git a/apps/web/core/debates/use-debate-playback.test.tsx b/apps/web/core/debates/use-debate-playback.test.tsx
index d3b990386d..36120506d6 100644
--- a/apps/web/core/debates/use-debate-playback.test.tsx
+++ b/apps/web/core/debates/use-debate-playback.test.tsx
@@ -163,12 +163,21 @@ function fakeVideo() {
     browserPause() {
       video.paused = true;
     },
+    /**
+     * The mirror of `browserPause`: an element the browser hands back running, of its own accord
+     * and at whatever position it stopped it. Distinct from `settlePlay`, which resolves a
+     * `play()` we asked for — nobody asked for this one.
+     */
+    browserResume() {
+      video.paused = false;
+    },
   };
   return video as unknown as HTMLVideoElement & {
     plays: number;
     settlePlay: () => void;
     rejectPlay: () => void;
     browserPause: () => void;
+    browserResume: () => void;
   };
 }
 
@@ -899,6 +908,58 @@ describe('useDebatePlayback — playback survives a backgrounded tab (GEO-2947)'
     expect(slot1.currentTime).toBeCloseTo(40, 1);
   });
 
+  /**
+   * The hook-level shape of the ratchet: the recovered position must never walk backwards over a
+   * slot 1 the browser hands back un-paused at the instant it stopped it.
+   */
+  it('does not rewind to a stopped slot 1 that comes back un-paused behind slot 2', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot1.browserPause(); // frozen at 0
+    slot2.currentTime = 40;
+    act(() => result.current.onPlaybackTick()); // the record reaches 40 off the running slot 2
+    slot2.browserPause();
+    // ...and now slot 1 reports itself running again, still at 0.
+    slot1.browserResume();
+    act(() => result.current.onPlaybackTick());
+
+    await act(async () => {
+      setVisibility('visible');
+      await Promise.resolve();
+      slot1.settlePlay();
+      slot2.settlePlay();
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(slot1.currentTime).toBeCloseTo(40, 1);
+    expect(slot2.currentTime).toBeCloseTo(40, 1);
+  });
+
+  /**
+   * A browser that declines to start a <video> off screen would otherwise be asked every two
+   * seconds for as long as the viewer is away — each attempt a `currentTime` write, which on these
+   * cue-less files is a demuxer parse walk (GEO-2828). The budget bounds it.
+   */
+  it('gives up restarting an element the browser keeps refusing', async () => {
+    const { result, slot1, slot2 } = await playing();
+
+    visibilityState = 'hidden';
+    slot2.browserPause(); // the listening element, which the turn will hand over to
+    slot1.currentTime = 35; // slot 2's turn, so slot 2 is the one to restart
+    const playsBefore = slot2.plays;
+
+    // Far more ticks than the budget, each past the 2s floor.
+    for (let tick = 0; tick < 20; tick++) {
+      act(() => {
+        vi.setSystemTime(Date.now() + 3_000);
+        result.current.onPlaybackTick();
+      });
+    }
+
+    expect(slot2.plays - playsBefore).toBeLessThanOrEqual(5);
+  });
+
   /** A pair the browser let run must not be seeked on return — that is the "no reset" half. */
   it('does not touch a pair that kept playing while the tab was hidden', async () => {
     const { result, slot1, slot2 } = await playing();
diff --git a/apps/web/core/debates/use-debate-playback.ts b/apps/web/core/debates/use-debate-playback.ts
index 4f8a1f565a..9ce9a88d9a 100644
--- a/apps/web/core/debates/use-debate-playback.ts
+++ b/apps/web/core/debates/use-debate-playback.ts
@@ -53,6 +53,18 @@ const MIN_SYNC_SEEK_INTERVAL_MS = 2_000;
  * Same reasoning as the seek floor: a browser that re-stops it must not cost a seek per tick.
  */
 const MIN_BACKGROUND_RESTART_INTERVAL_MS = 2_000;
+/**
+ * How many consecutive refusals before the off-screen restart gives up.
+ *
+ * The floor above paces the attempts but does not end them, and the ticks that drive them do not
+ * stop coming: the element still running emits `timeupdate` for as long as it plays. On a browser
+ * that simply declines to start a <video> off screen, that is an attempt every two seconds for as
+ * long as the viewer leaves the tab — twenty minutes of it is about six hundred `currentTime`
+ * writes, each a demuxer parse walk on these cue-less files (GEO-2828), on an element that is
+ * never going to start. Five refusals is enough to tell a slow start from a policy, and the return
+ * path resumes the pair anyway.
+ */
+const MAX_BACKGROUND_RESTART_ATTEMPTS = 5;
 /** No forward progress for this long, while unpaused, counts as stalled rather than slow. */
 const STALL_AFTER_MS = 500;
 /** Progress smaller than this is float noise on `currentTime`, not playback. */
@@ -114,6 +126,8 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
   const lastSyncSeekAtRef = React.useRef(0);
   /** See MIN_BACKGROUND_RESTART_INTERVAL_MS. */
   const lastBackgroundRestartAtRef = React.useRef(0);
+  /** Consecutive refusals of the off-screen restart. See MAX_BACKGROUND_RESTART_ATTEMPTS. */
+  const backgroundRestartAttemptsRef = React.useRef(0);
   /**
    * Debate-time of the last tick where an element was actually running.
    *
@@ -357,8 +371,11 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     const playhead = clampSeconds(position.seconds, timelineSeconds);
     // Off screen, record it whether or not it came off a running element: this tick may be the
     // `pause` event of the last element still going, and its final position is not observable
-    // anywhere else. `playhead` already folds the previous record in, so this cannot go backwards.
-    if (position.live || hidden) lastRunningPlayheadRef.current = playhead;
+    // anywhere else. Clamped rather than assigned, because the invariant this used to assert —
+    // that `playhead` already folds the previous record in — is the helper's to keep, not this
+    // line's to assume. It is kept under `trustSecondary`; the clamp makes it local and cheap.
+    if (hidden) lastRunningPlayheadRef.current = Math.max(lastRunningPlayheadRef.current ?? 0, playhead);
+    else if (position.live) lastRunningPlayheadRef.current = playhead;
     setPlayheadSeconds(playhead);
 
     // Lock slot 2 to slot 1, offset by the gap between when the two recordings started, so
@@ -505,13 +522,19 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       const speaking = turn.slot === 1 ? primaryVideo : secondaryVideo;
       const listening = turn.slot === 1 ? secondaryVideo : primaryVideo;
       const speakingOffset = turn.slot === 1 ? offsets.slot1 : offsets.slot2;
+      // Running, so the last attempt took (or it was never stopped): the budget is for a run of
+      // refusals, not a lifetime total, and a turn that hands over to a healthy element resets it.
+      if (speaking && !speaking.paused) backgroundRestartAttemptsRef.current = 0;
+
       if (
         speaking?.paused &&
         listening &&
         !listening.paused &&
+        backgroundRestartAttemptsRef.current < MAX_BACKGROUND_RESTART_ATTEMPTS &&
         now - lastBackgroundRestartAtRef.current > MIN_BACKGROUND_RESTART_INTERVAL_MS
       ) {
         lastBackgroundRestartAtRef.current = now;
+        backgroundRestartAttemptsRef.current += 1;
         speaking.currentTime = Math.max(0, playhead - speakingOffset);
         void speaking.play().catch(() => {
           /* The browser is entitled to refuse an off-screen start; the return path retries. */
@@ -529,74 +552,78 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     setTurnState(null);
   }, [videos]);
 
-  const resumeBoth = React.useCallback(async () => {
-    const primaryVideo = slot1VideoRef.current;
-    const secondaryVideo = slot2VideoRef.current;
-    if (!primaryVideo || !secondaryVideo) return;
-    // Claim this attempt. Bumping on entry also supersedes an earlier resume that is still
-    // awaiting, so two overlapping activations cannot both write state.
-    const generation = ++resumeGenerationRef.current;
-    setError(null);
-    // Realign the pair so a resume can't leave the recordings drifting. Off the *running*
-    // element's clock, not slot 1's unconditionally: a resume on return from a backgrounded tab
-    // is exactly the case where slot 1 may be the one the browser stopped, and seeking to its
-    // frozen position would rewind the debate over everything just heard (GEO-2947).
-    // No `trustSecondary` here: this runs in the foreground (the reconcile fires on the way back
-    // *to* visible), where slot 1 is canonical. Anything learnt while the tab was away is already
-    // in `lastRunningPlayheadRef`, put there by the ticks that ran while it was hidden.
-    seekVideosTo(
-      clampSeconds(
-        pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current).seconds,
-        timelineSeconds
-      )
-    );
-    // allSettled never rejects, so a failed play() (e.g. blocked by autoplay
-    // policy) leaves the video paused rather than throwing — check both the
-    // settled results and the paused state, and surface the error inline.
-    //
-    // Counted across the await, not just marked: overlapping attempts are normal here (see
-    // `resumeGenerationRef`), and a flag would be cleared by the first to finish while the
-    // other was still starting its elements.
-    resumesInFlightRef.current++;
-    setIsResuming(true);
-    let outcome: PlayBothOutcome;
-    try {
-      outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo, {
-        // The helper spends most of its runtime asleep confirming, and a pause, a scrub or a
-        // scroll-away lands in that window routinely. Bumping the generation is how all of those
-        // say "these elements are mine now", so it is the cancellation signal — checked inside,
-        // before the muted retry, because by the time this returns the retry's `play()` has
-        // already happened and no state check here can take it back.
-        isCancelled: () => resumeGenerationRef.current !== generation,
-      });
-    } finally {
-      resumesInFlightRef.current--;
-      // Only the last one out: overlapping attempts are normal here, and the renderer must not
-      // repair `muted` while another retry is still relying on it.
-      if (resumesInFlightRef.current === 0) setIsResuming(false);
-    }
-    // Superseded while we waited — something else owns these elements now. Every write below
-    // would describe a playback attempt that no longer exists, including the 'blocked' error,
-    // which at this point only means "someone paused us mid-confirm". 'cancelled' is the same
-    // thing noticed from inside, and is spelled out rather than left to the generation check so
-    // that a future caller cannot accidentally read it as a successful start.
-    if (outcome === 'cancelled') return;
-    if (resumeGenerationRef.current !== generation) return;
-    if (outcome === 'blocked') {
-      primaryVideo.pause();
-      secondaryVideo.pause();
-      setPlaying(false);
-      setTurnState(null);
-      setError('Could not play both videos. Try Play again.');
-      return;
-    }
-    // The browser only allowed it muted (GEO-2783) — record that so the unmute control is honest
-    // and later autoplays stop being blocked the same way. The viewer's next tap is a gesture and
-    // will be allowed.
-    if (outcome === 'playing-muted') setMutedByUser(true);
-    setPlaying(true);
-    setUserPaused(false);
-  }, [offsets, seekVideosTo, setMutedByUser, timelineSeconds]);
+  const resumeBoth = React.useCallback(
+    async (fromSeconds?: number) => {
+      const primaryVideo = slot1VideoRef.current;
+      const secondaryVideo = slot2VideoRef.current;
+      if (!primaryVideo || !secondaryVideo) return;
+      // Claim this attempt. Bumping on entry also supersedes an earlier resume that is still
+      // awaiting, so two overlapping activations cannot both write state.
+      const generation = ++resumeGenerationRef.current;
+      setError(null);
+      // Realign the pair so a resume can't leave the recordings drifting. Off the *running*
+      // element's clock, not slot 1's unconditionally: a resume on return from a backgrounded tab
+      // is exactly the case where slot 1 may be the one the browser stopped, and seeking to its
+      // frozen position would rewind the debate over everything just heard (GEO-2947).
+      // Where to resume from. Normally the pair's own position, read the foreground way: slot 1 is
+      // canonical, and a running slot 1 is the whole answer.
+      //
+      // `fromSeconds` is for the one caller that knows better — the reconcile on the way back from a
+      // hidden tab, where slot 1 can be running at the instant the browser stopped it rather than at
+      // where the debate got to. It has already worked that out; re-deriving it here would read the
+      // stale clock and rewind the pair over audio the viewer heard while away.
+      const resumeFrom =
+        fromSeconds ?? pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current).seconds;
+      seekVideosTo(clampSeconds(resumeFrom, timelineSeconds));
+      // allSettled never rejects, so a failed play() (e.g. blocked by autoplay
+      // policy) leaves the video paused rather than throwing — check both the
+      // settled results and the paused state, and surface the error inline.
+      //
+      // Counted across the await, not just marked: overlapping attempts are normal here (see
+      // `resumeGenerationRef`), and a flag would be cleared by the first to finish while the
+      // other was still starting its elements.
+      resumesInFlightRef.current++;
+      setIsResuming(true);
+      let outcome: PlayBothOutcome;
+      try {
+        outcome = await playBothWithMutedFallback(primaryVideo, secondaryVideo, {
+          // The helper spends most of its runtime asleep confirming, and a pause, a scrub or a
+          // scroll-away lands in that window routinely. Bumping the generation is how all of those
+          // say "these elements are mine now", so it is the cancellation signal — checked inside,
+          // before the muted retry, because by the time this returns the retry's `play()` has
+          // already happened and no state check here can take it back.
+          isCancelled: () => resumeGenerationRef.current !== generation,
+        });
+      } finally {
+        resumesInFlightRef.current--;
+        // Only the last one out: overlapping attempts are normal here, and the renderer must not
+        // repair `muted` while another retry is still relying on it.
+        if (resumesInFlightRef.current === 0) setIsResuming(false);
+      }
+      // Superseded while we waited — something else owns these elements now. Every write below
+      // would describe a playback attempt that no longer exists, including the 'blocked' error,
+      // which at this point only means "someone paused us mid-confirm". 'cancelled' is the same
+      // thing noticed from inside, and is spelled out rather than left to the generation check so
+      // that a future caller cannot accidentally read it as a successful start.
+      if (outcome === 'cancelled') return;
+      if (resumeGenerationRef.current !== generation) return;
+      if (outcome === 'blocked') {
+        primaryVideo.pause();
+        secondaryVideo.pause();
+        setPlaying(false);
+        setTurnState(null);
+        setError('Could not play both videos. Try Play again.');
+        return;
+      }
+      // The browser only allowed it muted (GEO-2783) — record that so the unmute control is honest
+      // and later autoplays stop being blocked the same way. The viewer's next tap is a gesture and
+      // will be allowed.
+      if (outcome === 'playing-muted') setMutedByUser(true);
+      setPlaying(true);
+      setUserPaused(false);
+    },
+    [offsets, seekVideosTo, setMutedByUser, timelineSeconds]
+  );
 
   const playFromStart = React.useCallback(async () => {
     const primaryVideo = slot1VideoRef.current;
@@ -685,13 +712,15 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
    * element fires `pause`, and that is wired to `onPlaybackTick`). This does not depend on their
    * having done so.
    */
-  const recoverBackgroundPlayhead = React.useCallback(() => {
+  const recoverBackgroundPlayhead = React.useCallback((): number | null => {
     const primaryVideo = slot1VideoRef.current;
     const secondaryVideo = slot2VideoRef.current;
-    if (!primaryVideo || !secondaryVideo) return false;
+    if (!primaryVideo || !secondaryVideo) return null;
     const position = pairPlayhead(primaryVideo, secondaryVideo, offsets, lastRunningPlayheadRef.current, true);
     const recovered = clampSeconds(position.seconds, timelineSeconds);
     lastRunningPlayheadRef.current = recovered;
+    // Back on screen: whatever the browser refused off screen, it is not refusing now.
+    backgroundRestartAttemptsRef.current = 0;
 
     // Publish it, not just remember it. `playheadSeconds` is React state that only ticks maintain,
     // and ticks are exactly what a background tab throttles — so on the way back it can be a
@@ -699,13 +728,16 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // active speaker, and `playbackEnded`.
     setPlayheadSeconds(recovered);
 
-    if (recovered < timelineSeconds - PLAYBACK_END_EPSILON_SECONDS) {
+    // `timelineSeconds > 0` mirrors `playbackEnded` exactly — the point of sharing the epsilon was
+    // that the two cannot disagree about whether a debate has finished, and a zero-length timeline
+    // is the one input where they still could.
+    if (timelineSeconds <= 0 || recovered < timelineSeconds - PLAYBACK_END_EPSILON_SECONDS) {
       // The turn moves with the playhead. It is separate state rather than derived, and it is
       // what `audible` reads — so a pair that kept playing across a turn boundary while hidden
       // would otherwise come back with the volume still on the debater who had stopped speaking,
       // until the next media tick happened to correct it.
       setTurnState(turnStateAt(recovered));
-      return false;
+      return recovered;
     }
 
     // The debate finished while the tab was away. Resuming here would be wrong twice over: there
@@ -715,14 +747,14 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
     // the one the ticks would have reached had they been allowed to run.
     setPlaying(false);
     setTurnState(null);
-    return true;
+    return null;
   }, [offsets, timelineSeconds, turnStateAt]);
 
   const backgroundIntentRef = React.useRef<{
     shouldBePlaying: boolean;
-    resumeBoth: () => Promise<void>;
-    /** @returns true when the debate finished while the tab was away — nothing to resume. */
-    recoverBackgroundPlayhead: () => boolean;
+    resumeBoth: (fromSeconds?: number) => Promise<void>;
+    /** @returns the position to resume from, or null when the debate finished while away. */
+    recoverBackgroundPlayhead: () => number | null;
   }>({
     shouldBePlaying: false,
     resumeBoth,
@@ -748,11 +780,14 @@ export function useDebatePlayback(debate: Debate, enabled: boolean) {
       // Settle where the debate got to *first*, and unconditionally: the state this reads from
       // is maintained by ticks, and a throttled background tab is precisely where ticks did not
       // run. That includes the case the resume must not happen at all.
-      if (recover()) return;
+      const recovered = recover();
+      if (recovered === null) return;
       // Both still running — the tab was backgrounded and the browser let it be. Nothing to do,
       // and calling resumeBoth here would seek a pair that is already in step.
       if (!primaryVideo.paused && !secondaryVideo.paused) return;
-      void resume();
+      // Hand the position over rather than letting the resume re-derive it: slot 1 may be running
+      // again at the instant the browser stopped it, and that is not where the debate got to.
+      void resume(recovered);
     };
     document.addEventListener('visibilitychange', reconcile);
     return () => document.removeEventListener('visibilitychange', reconcile);