multi-line verdict layout

review.html

@@ -278,18 +278,18 @@ function renderRef(sp) {
   const n = cur().spans.findIndex(x => x.key === sp.key) + 1;
   const subj = `“${esc(sp.surface)}” (#${n})`;
   const flag = (youKeep === lunaKeep)
-    ? `<span style="color:var(--mut)">${subj}: you agree with Luna</span>`
-    : `<b class="d">DISAGREE</b> <span style="color:var(--mut)">— ${subj}: Luna ${lunaKeep ? 'kept this, you\u2019re dropping' : 'dropped this, you\u2019re keeping'}</span>`;
+    ? `<div>${subj}: <span style="color:var(--mut)">you agree with Luna</span></div>`
+    : `<div><b class="d">DISAGREE</b> <span style="color:var(--mut)">— ${subj}: Luna ${lunaKeep ? 'kept this, you\u2019re dropping' : 'dropped this, you\u2019re keeping'}</span></div>`;
   let detail;
-  const why = sp.luna_reason ? ` · Luna's reasoning: “${esc(sp.luna_reason)}”` : '';
   if (sp.luna_label !== undefined && sp.human_verdict) {
     const g = lunaKeep ? '<b class="k">KEEP</b>' : '<b class="d">DROP</b>';
-    detail = `gold ${g} · human ${esc(sp.human_verdict)}${sp.human_note ? ' (' + esc(sp.human_note) + ')' : ''} · model ${sp.pred} @ ${sp.probe_score}${why}`;
+    detail = `gold ${g} · human ${esc(sp.human_verdict)}${sp.human_note ? ' (' + esc(sp.human_note) + ')' : ''} · model ${sp.pred} @ ${sp.probe_score}`;
   } else {
     const g = lunaKeep ? '<b class="k">KEEP</b>' : '<b class="d">DROP</b>';
-    detail = `luna ${g} · probe ${esc(sp.probe_tag)} @ ${sp.probe_score}${why}`;
+    detail = `luna ${g} · probe ${esc(sp.probe_tag)} @ ${sp.probe_score}`;
   }
-  $('ref').innerHTML = `${flag} · ${detail}`;
+  const why = sp.luna_reason ? `<div style="color:var(--mut)">Luna's reasoning: “${esc(sp.luna_reason)}”</div>` : '';
+  $('ref').innerHTML = `${flag}<div>${detail}</div>${why}`;
 }
 function lightMeta() {
   const mine = R[span().key];