Show context cues after script text

index.html

@@ -120,12 +120,12 @@
         const turn = document.createElement("p");
         const speaker = speakers[index];
         const context = contexts[index];
-        const contextPrefix = context ? `<strong>(${escapeHtml(context)})</strong> ` : "";
+        const contextBadge = context ? ` <span class="context-cue">${escapeHtml(context)}</span>` : "";
         const escapedText = escapeHtml(text);
         if (speaker !== undefined && speaker !== "") {
-          turn.innerHTML = `<strong>[S${Number(speaker) + 1}]</strong> ${contextPrefix}${escapedText}`;
+          turn.innerHTML = `<strong>[S${Number(speaker) + 1}]</strong> ${escapedText}${contextBadge}`;
         } else {
-          turn.innerHTML = `${contextPrefix}${escapedText}`;
+          turn.innerHTML = `${escapedText}${contextBadge}`;
         }
         wrapper.appendChild(turn);
       });

static/css/index.css

@@ -228,6 +228,22 @@ body {
   margin-bottom: 0;
 }
 
+.context-cue {
+  display: inline;
+  margin-left: 0.35rem;
+  color: var(--muted);
+  font-size: 0.84em;
+  font-weight: 700;
+}
+
+.context-cue::before {
+  content: "(";
+}
+
+.context-cue::after {
+  content: ")";
+}
+
 .reference-cell {
   display: grid;
   gap: 0.55rem;