fix(web): r3 codex review — ribbon ranking, gloss label, dag rm

Three real defects from adversarial review of the r3 diff.

- Marginalia ribbon picked the wrong section. With rootMargin
  -30%/-30% and `intersectionRatio` ranking, multiple sections often
  qualified simultaneously and the SHORTEST section won (its bounding
  rect occupied a larger fraction of the centre band). Visible bug:
  ribbon showed "§ 02 · 7 · 骨格" while the readalong section was
  dominant. Fix: walk SECTIONS on each observer fire, pick the chapter
  whose vertical centre is closest to the viewport midpoint, and only
  if a chapter actually straddles that midpoint. The ribbon now hides
  when reading the hero / access bookends instead of staying pinned to
  the last visited chapter.

- ReadAlong EN-pane gloss label was a constant. Every EN span carried
  `SOURCE · {customId}`, so all five spans showed the same chip — the
  recon brief calls for bidirectional gloss but the label didn't carry
  per-span identity. Fix: use `glossLabel(p.section, p.page)` like the
  JA-pane spans, so EN→JA hover surfaces the source section / page,
  with the JA mate in the aux line.

- DAG RAF kept advancing under prefers-reduced-motion. The reducedMotion
  state zeroed the ink-pressure speed multiplier but the loop still
  ticked at the base rate, re-rendering React every frame for users who
  explicitly opted out of motion. Fix: gate the RAF effect on
  reducedMotion — when true, set static initial state and skip the
  loop entirely.

Defence in depth: also added a `prefers-reduced-motion` media rule
zeroing `#paper-stage`'s velocity coupling, in case a future paper-rail
refactor ever stops pinning --paper-vel to 0.

Codex flags also surfaced false positives (cite-gloss tooltip jumping
into <sup>, duplicate 節度 across failures+manifest section-tags) —
logged in r3-readout.md "Adversarial review notes".

Typecheck clean, vitest 41/41.

Author: javierdejesusda

web/app/globals.css

@@ -1148,6 +1148,13 @@ section[data-paper-hide] {
   pointer-events: none;
   will-change: opacity;
 }
+@media (prefers-reduced-motion: reduce) {
+  /* Defence in depth: paper-rail.tsx already pins --paper-vel to 0 under
+     reduced-motion (line 855), but if a future refactor ever moved the
+     motion-media check, the calc above would silently start animating
+     opacity. Strip the velocity coupling explicitly for this cohort. */
+  #paper-stage { opacity: var(--paper-fade, 1); }
+}
 
 /* Hero → Problem edge bleed.  PaperRail writes --paper-edge-progress
    between 0 and 1 during the handoff window where the paper is still

web/components/sections/dag.tsx

@@ -54,6 +54,15 @@ export function Dag() {
   pressureRef.current = reducedMotion ? 0 : pressure;
 
   useEffect(() => {
+    // Skip the RAF loop entirely under reduced-motion. Previously the
+    // loop kept advancing at base speed (just without ink-pressure
+    // multiplier), so React still re-rendered every frame with new
+    // `edge` / `t` values for users who explicitly opted out of motion.
+    if (reducedMotion) {
+      setEdge(0);
+      setT(0);
+      return;
+    }
     let raf = 0;
     const tick = (now: number) => {
       const last = lastRef.current ?? now;
@@ -75,7 +84,7 @@ export function Dag() {
     };
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
-  }, []);
+  }, [reducedMotion]);
 
   const fromNode = NODES[edge];
   const toNode = NODES[edge + 1] ?? NODES[edge];

web/components/sections/readalong.tsx

@@ -189,7 +189,7 @@ export function ReadAlong() {
                   key={p.pair}
                   className={"ra-span" + (hovered === p.pair ? " is-on" : "")}
                   data-pair={p.pair}
-                  data-gloss-label={`SOURCE · ${filer.customId}`}
+                  data-gloss-label={glossLabel(p.section, p.page)}
                   data-gloss-aux={truncate(p.jp, 60)}
                   onMouseEnter={() => setHovered(p.pair)}
                   onMouseLeave={() => setHovered(null)}

web/components/ui/marginalia-ribbon.tsx

@@ -3,11 +3,10 @@ import { useEffect, useState } from "react";
 
 type SectionMeta = { id: string; num: string; ja: string };
 
-// Section-header data, mirrored from each section's `<div className="section-tag">`.
-// Phase-4 ships these in the post-Phase-5 §-numbering format so the ribbon
-// reads coherently from day one; Phase 5 brings the in-section tags into
-// alignment. Hero / Access intentionally omitted — they bookend the document
-// and don't carry a §-numbered chapter label.
+// Section ids and § labels mirror the in-section `.section-tag` `.num` and
+// `.ja` text. Keep these in sync with the corresponding section component.
+// Hero / Access intentionally omitted — they bookend the document and don't
+// carry a §-numbered chapter label, so the ribbon hides over those zones.
 const SECTIONS: SectionMeta[] = [
   { id: "problem", num: "§ 01", ja: "読まれない" },
   { id: "how", num: "§ 02", ja: "仕組み" },
@@ -25,11 +24,13 @@ const SECTIONS: SectionMeta[] = [
 
 // Editorial running header. Sits in the top-right gutter just below the
 // topbar, fades in 1.5 s after page-load (same delay as ProgressRail) so
-// it never competes with the hero. Tracks the section currently dominant
-// in the viewport via an IntersectionObserver tuned to the centre band
-// (rootMargin: -30% 0px -30% 0px) so it reads what the user is reading,
-// not what is just barely on screen. Hidden on tablet/mobile so the
-// reduced viewport keeps the typographic spine.
+// it never competes with the hero. Reads which section the reader is in
+// by picking the chapter whose vertical centre is closest to the
+// viewport's centre — `intersectionRatio` favours shorter sections (their
+// area-fraction inside any band is higher), so we recompute on each
+// observer fire from `getBoundingClientRect`. The ribbon stays null when
+// no observed section straddles the viewport centre — i.e. while the
+// user is reading the hero or the access bookends, the ribbon hides.
 export function MarginaliaRibbon() {
   const [active, setActive] = useState<SectionMeta | null>(null);
   const [visible, setVisible] = useState(false);
@@ -40,23 +41,38 @@ export function MarginaliaRibbon() {
   }, []);
 
   useEffect(() => {
-    const obs = new IntersectionObserver(
-      (entries) => {
-        const inView = entries
-          .filter((e) => e.isIntersecting)
-          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
-        if (inView[0]) {
-          const id = (inView[0].target as HTMLElement).id;
-          const meta = SECTIONS.find((s) => s.id === id);
-          if (meta) setActive(meta);
-        }
-      },
-      { rootMargin: "-30% 0px -30% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] },
-    );
+    const recompute = () => {
+      const viewportCenter = window.innerHeight / 2;
+      let best: { meta: SectionMeta; dist: number } | null = null;
+      for (const s of SECTIONS) {
+        const el = document.getElementById(s.id);
+        if (!el) continue;
+        const r = el.getBoundingClientRect();
+        // Section must straddle the centre line — its top above and its
+        // bottom below the viewport midpoint. Otherwise we're between
+        // chapters or outside them entirely (hero / access).
+        if (r.top > viewportCenter || r.bottom < viewportCenter) continue;
+        const sectionCenter = r.top + r.height / 2;
+        const dist = Math.abs(sectionCenter - viewportCenter);
+        if (!best || dist < best.dist) best = { meta: s, dist };
+      }
+      setActive(best ? best.meta : null);
+    };
+
+    const obs = new IntersectionObserver(recompute, {
+      // A thin centre band — only fires when sections cross the viewport
+      // midpoint. Combined with the recompute walk above, this gives one
+      // active section at a time without favouring shorter ones.
+      rootMargin: "-50% 0px -49.99% 0px",
+      threshold: 0,
+    });
     SECTIONS.forEach((s) => {
       const el = document.getElementById(s.id);
       if (el) obs.observe(el);
     });
+    // Run once on mount so first paint isn't blank if the observer's
+    // first fire is delayed.
+    recompute();
     return () => obs.disconnect();
   }, []);