Expand board help and add a phone-friendly Help control

Same dialog for keyboard ?, header ?, and footer Help: sharing,
votes, columns, and notes/voice icons in one place.

static/v2.html

@@ -109,6 +109,9 @@
       color: var(--muted); font-size: 0.92rem;
     }
     .who a { color: var(--ink); }
+    .who-actions {
+      display: inline-flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
+    }
     .boards-row {
       display: flex; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem;
       min-width: 0;
@@ -283,9 +286,16 @@
     }
     .help-dialog p { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
     .help-dialog ul {
-      margin: 0 0 0.85rem; padding-left: 1.1rem;
+      margin: 0 0 0.65rem; padding-left: 1.1rem;
       color: var(--muted); font-size: 0.88rem; line-height: 1.45;
     }
+    .help-dialog h3 {
+      font-family: "Source Sans 3", sans-serif;
+      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
+      text-transform: uppercase; color: var(--ink);
+      margin: 0.75rem 0 0.35rem;
+    }
+    .help-dialog h3:first-of-type { margin-top: 0.15rem; }
     .help-dialog kbd {
       font-family: "Source Sans 3", sans-serif;
       font-size: 0.85rem; font-weight: 600;
@@ -293,6 +303,29 @@
       background: var(--input-bg); color: var(--ink);
     }
     .help-dialog .row { margin-top: 0.25rem; }
+    button.help-link, a.help-link {
+      all: unset; cursor: pointer; color: var(--ink);
+      text-decoration: underline; text-underline-offset: 2px;
+      font-size: inherit;
+    }
+    button.help-link:focus-visible {
+      outline: 3px solid var(--focus); outline-offset: 2px;
+    }
+    .who .help-chip {
+      all: unset; cursor: pointer;
+      display: inline-grid; place-items: center;
+      width: 1.85rem; height: 1.85rem;
+      border: 1px solid var(--rule); color: var(--muted);
+      font-family: "Source Sans 3", sans-serif;
+      font-size: 0.95rem; font-weight: 600;
+      vertical-align: middle;
+    }
+    .who .help-chip:hover, .who .help-chip:focus-visible {
+      color: var(--ink); border-color: var(--ink);
+    }
+    .who .help-chip:focus-visible {
+      outline: 3px solid var(--focus); outline-offset: 2px;
+    }
     .hidden { display: none !important; }
     .compose-head {
       display: flex; justify-content: space-between; gap: 0.75rem;
@@ -375,7 +408,8 @@
     <section id="board" class="hidden">
       <div class="who">
         <span id="who"></span>
-        <span>
+        <span class="who-actions">
+          <button type="button" class="help-chip" data-open-help aria-label="Help" title="Help">?</button>
           <button type="button" class="ghost" id="share-link" style="padding:0.35rem 0.6rem;font-size:0.85rem">Copy share link</button>
           <a href="#suggest">Suggest a name</a>
         </span>
@@ -430,22 +464,36 @@
       </div>
     </section>
 
-    <p class="foot">Paper board · press <kbd>?</kbd> for help · <a href="/v1">classic layout</a></p>
+    <p class="foot">Paper board · <button type="button" class="help-link" data-open-help>Help</button> · press <kbd>?</kbd> · <a href="/v1">classic layout</a></p>
   </main>
   <dialog id="help-dialog" class="help-dialog" aria-labelledby="help-title">
     <div class="help-inner">
-      <h2 id="help-title">Board tips</h2>
+      <h2 id="help-title">How this board works</h2>
-      <p>Open a name to vote, play pronunciation, and leave notes.</p>
+      <h3>Sharing</h3>
       <ul>
-        <li><strong>▶</strong> play — AI speech until you record</li>
+        <li>The <strong>/b/…</strong> link is the key — no password. Use <strong>Copy share link</strong>.</li>
-        <li><strong>●</strong> record / <strong>■</strong> stop — your clip replaces AI</li>
+        <li>Everyone picks a display name; it shows on votes.</li>
-        <li><strong>↺</strong> clear recording and use AI again</li>
+      </ul>
-        <li><strong>✎</strong> edit spoken form, origin, meaning · <strong>✓</strong> save</li>
+      <h3>Names &amp; votes</h3>
-        <li>Swipe columns sideways on phone</li>
+      <ul>
+        <li>Tap a name to expand. ▲ / ▼ rank it (tap again to clear).</li>
+        <li>Suggest names below; pick which column with the toggles.</li>
+      </ul>
+      <h3>Columns</h3>
+      <ul>
+        <li>Rename a column title in place. <strong>+</strong> adds another (up to 4).</li>
+        <li><strong>✕</strong> removes an extra column (the first stays).</li>
+        <li>On phone, swipe sideways between columns.</li>
+      </ul>
+      <h3>Notes &amp; voice</h3>
+      <ul>
+        <li><strong>EN / RU / HE</strong> — spoken form, origin, meaning per language.</li>
+        <li><strong>▶</strong> play (AI until you record) · <strong>●</strong> record · <strong>■</strong> stop</li>
+        <li><strong>↺</strong> back to AI · <strong>✎</strong> edit notes · <strong>✓</strong> save</li>
       </ul>
       <div class="row">
         <button type="button" id="help-close">Close</button>
-        <span class="hint" style="margin:0">Esc or <kbd>?</kbd> again</span>
+        <span class="hint" style="margin:0">Esc or <kbd>?</kbd></span>
       </div>
     </div>
   </dialog>
@@ -473,6 +521,11 @@
       return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
     }
 
+    function openHelp() {
+      const dlg = document.getElementById("help-dialog");
+      if (dlg && !dlg.open) dlg.showModal();
+    }
+
     function toggleHelp() {
       const dlg = document.getElementById("help-dialog");
       if (!dlg) return;
@@ -486,6 +539,12 @@
     document.getElementById("help-dialog").addEventListener("click", (e) => {
       if (e.target === e.currentTarget) e.currentTarget.close();
     });
+    document.querySelectorAll("[data-open-help]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        openHelp();
+      });
+    });
     document.addEventListener("keydown", (e) => {
       if (e.key === "?" || (e.key === "/" && e.shiftKey)) {
         if (isTypingTarget(e.target)) return;