Tighten name card actions to icons with help behind ?

Replace Edit/Record text buttons with compact icons, drop the
always-on guide line, and put voice/notes instructions behind ?.

static/v2.html

@@ -252,7 +252,6 @@
       display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
       margin-top: 0.55rem;
     }
-    .voice-row button { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
     .voice-row button.recording {
       background: var(--rec); color: #fff; border-color: var(--rec);
       animation: pulse 1.2s ease-in-out infinite;
@@ -260,13 +259,38 @@
     @keyframes pulse {
       50% { opacity: 0.75; }
     }
-    .play {
+    .icon-btn, .play {
       width: 2rem; height: 2rem; padding: 0;
       display: inline-grid; place-items: center;
       background: transparent; color: var(--ink); border: 1px solid var(--rule);
+      font-size: 0.95rem; line-height: 1;
     }
     .play.playing { background: var(--ink); color: var(--paper); }
-    .note { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
+    .say-row .card-help { margin-left: auto; }
+    .card-help {
+      position: relative;
+    }
+    .card-help > summary {
+      list-style: none;
+      width: 2rem; height: 2rem;
+      display: inline-grid; place-items: center;
+      border: 1px solid var(--rule);
+      color: var(--muted);
+      cursor: pointer;
+      font-family: "Source Sans 3", sans-serif;
+      font-size: 0.95rem; font-weight: 600;
+    }
+    .card-help > summary::-webkit-details-marker { display: none; }
+    .card-help[open] > summary { color: var(--ink); border-color: var(--ink); }
+    .card-help .help-body {
+      position: absolute; right: 0; top: calc(100% + 0.35rem);
+      z-index: 2; width: min(16rem, 70vw);
+      margin: 0; padding: 0.55rem 0.65rem;
+      background: var(--sheet); color: var(--muted);
+      border: 1px solid var(--rule);
+      font-size: 0.8rem; line-height: 1.35;
+      box-shadow: 0 4px 14px rgba(20, 20, 20, 0.08);
+    }
     .empty { color: var(--muted); font-size: 0.92rem; padding: 0.35rem 0; }
     .hidden { display: none !important; }
     .compose-head {
@@ -621,18 +645,21 @@
             <div class="drawer ${open ? "" : "hidden"}">
               <div class="say-row">
                 <div class="pills">${pills}</div>
-                <button type="button" class="play" data-play aria-label="Play pronunciation">▶</button>
+                <button type="button" class="play" data-play aria-label="Play pronunciation" title="Play">▶</button>
                 <span class="voice-status">${hasRec ? "<strong>Your voice</strong>" : "AI speech"}</span>
+                <details class="card-help">
+                  <summary aria-label="How voice and notes work" title="Help">?</summary>
+                  <p class="help-body">Play uses AI speech until you record your own. Re-record replaces the clip. The reset icon returns to AI. Pencil edits spoken form, origin, and meaning.</p>
+                </details>
               </div>
               ${editing || !hasNotes ? notesEdit : notesView}
               <div class="voice-row">
                 ${editing || !hasNotes
-                  ? `<button type="button" class="ghost" data-save-notes>Save</button>`
+                  ? `<button type="button" class="icon-btn" data-save-notes aria-label="Save notes" title="Save">✓</button>`
-                  : `<button type="button" class="ghost" data-edit-notes>Edit notes</button>`}
+                  : `<button type="button" class="icon-btn" data-edit-notes aria-label="Edit notes" title="Edit notes">✎</button>`}
-                <button type="button" class="ghost ${recActive ? "recording" : ""}" data-record>${recActive ? "Stop" : (hasRec ? "Re-record" : "Record")}</button>
+                <button type="button" class="icon-btn ${recActive ? "recording" : ""}" data-record aria-label="${recActive ? "Stop recording" : (hasRec ? "Re-record" : "Record")}" title="${recActive ? "Stop" : (hasRec ? "Re-record" : "Record")}">${recActive ? "■" : "●"}</button>
-                ${hasRec ? `<button type="button" class="ghost" data-clear-rec>Use AI speech</button>` : ""}
+                ${hasRec ? `<button type="button" class="icon-btn" data-clear-rec aria-label="Use AI speech" title="Use AI speech">↺</button>` : ""}
               </div>
-              <p class="note">Play uses AI until you record; Re-record replaces it.</p>
             </div>
           </div>
           <div class="votes">