Walkthroughs: stop autoplaying muted, and show the length

Marty asked why they start muted. Browsers only permit autoplay when a video
is muted, so "expand and play" necessarily meant "expand and play silently" —
and for these that is the wrong trade, because the narration IS the training.
A member's first visit was showing them a silent walkthrough.

So the panel now opens paused with the play button showing. Pressing it is a
user gesture, which means it plays with sound, every time. preload stays
'none' until the panel opens, then goes to 'metadata' so an open panel shows
a real first frame instead of a black rectangle.

Each bar now also carries its runtime ("· 71 sec"), so nobody has to guess
whether they are committing to one minute or ten.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/tool-video.js

@@ -42,21 +42,24 @@
 
     var vid = document.createElement('video');
     vid.controls = true;
+    // Nothing is fetched until the panel is actually opened; open() then bumps
+    // this to 'metadata' so an expanded panel shows a real first frame rather
+    // than a black rectangle.
     vid.preload = 'none';
     vid.playsInline = true;
     vid.src = SRC;
     body.appendChild(vid);
 
-    function open(autoplay) {
+    function open() {
       body.hidden = false;
       wrap.classList.add('on');
       bar.setAttribute('aria-expanded', 'true');
-      if (autoplay) {
-        // Muted so a first-visit autoplay is never a surprise noise; the member
-        // unmutes if they want it. Browsers block unmuted autoplay anyway.
-        vid.muted = true;
-        vid.play().catch(function () {});
-      }
+      // Deliberately NOT autoplaying. Browsers only permit autoplay when the
+      // video is muted, and a silent walkthrough is worthless here — the
+      // narration IS the training. So on first visit the panel opens with the
+      // video paused and the play button showing; pressing it is a user
+      // gesture, which means it plays with sound, every time.
+      vid.preload = 'metadata';
     }
     function close() {
       body.hidden = true;
@@ -66,7 +69,7 @@
     }
 
     bar.addEventListener('click', function () {
-      if (body.hidden) { open(false); markSeen(); }
+      if (body.hidden) { open(); markSeen(); }
       else close();
     });
 
@@ -80,7 +83,7 @@
     if (lede && lede.parentNode) lede.parentNode.insertBefore(wrap, lede.nextSibling);
     else host.insertBefore(wrap, host.firstChild);
 
-    if (!seen()) { open(true); markSeen(); }
+    if (!seen()) { open(); markSeen(); }
   }
 
   function style() {