@@ -230,7 +230,7 @@
           <li
             v-for="(choice, index) in state.distractors"
             :key="`${choice.id}-${index}`"
-            :class="isDistractorOpen(index) ? 'distractor-editing' : 'chip'"
+            :class="isDistractorOpen(index) ? 'distractor-editing' : 'chip is-tinted'"
             :style="cardStyle(choice.id)"
           >
             <ClickableRegion
@@ -530,7 +530,7 @@
       function poolChipStyle(id) {
         const isCorrect = props.showAnswers && pairedIds.value.has(id);
         return {
-          borderColor: isCorrect ? palette.green.v_500 : tokens.fineLine,
+          borderColor: isCorrect ? palette.green.v_600 : tokens.fineLine,
           backgroundColor: isCorrect ? palette.green.v_50 : null,
         };
       }
@@ -697,15 +697,19 @@
     display: grid;
     grid-template-areas:
       'label cards actions'
-      '. message .';
+      'message message message';
     grid-template-columns: auto 1fr auto;
-    gap: 8px;
+
+    // Column-only: the message row track exists even when empty, so a row gap
+    // would pad every row without a message.
+    column-gap: 8px;
     align-items: center;
     border-radius: 4px;
 
     &.is-editable {
       padding: 8px;
-      background-color: v-bind('$themePalette.grey.v_100');
+      background-color: v-bind('$themePalette.grey.v_50');
+      border: 1px solid v-bind('$themeTokens.fineLine');
     }
 
     &.is-stacked {
@@ -733,12 +737,33 @@
 
     .is-stacked & {
       flex-direction: column;
+      margin-top: 8px;
     }
   }
 
+  // A pair card sits on the tinted row, so it carries the surface colour itself.
   .pair-card {
     flex: 1;
     min-width: 0;
+    background-color: v-bind('$themeTokens.surface');
+
+    .item-card-text {
+      padding: 0;
+
+      &.is-closed {
+        min-height: 40px;
+
+        // A closed card shows one line, so paragraph margins would only push it
+        // past that height.
+        ::v-deep .ProseMirror p {
+          margin: 0;
+        }
+      }
+    }
+
+    ::v-deep .editor-content {
+      padding: 8px;
+    }
   }
 
   .pair-actions {
@@ -749,6 +774,7 @@
 
   .pair-message {
     grid-area: message;
+    margin-top: 8px;
   }
 
   .pool-box {
@@ -760,7 +786,7 @@
     border-radius: 4px;
 
     &.is-shuffled {
-      background-color: v-bind('$themePalette.grey.v_100');
+      background-color: v-bind('$themePalette.grey.v_50');
     }
   }
 
@@ -773,16 +799,29 @@
     list-style: none;
   }
 
-  // A chip is a compact pill, so it overrides the editor's own content padding.
+  // A chip is a compact pill, so it replaces the editor's own content padding
+  // and paragraph margins with its own.
   .chip {
     display: flex;
+    gap: 8px;
     align-items: center;
-    padding: 0 4px 0 12px;
+    padding: 4px 12px;
+    background-color: v-bind('$themeTokens.surface');
     border: 1px solid;
     border-radius: 4px;
 
+    // Tinted only in the distractor pool, whose box sits on the surface; the
+    // shuffled pool is itself tinted, so its chips stay on the surface.
+    &.is-tinted {
+      background-color: v-bind('$themePalette.grey.v_50');
+    }
+
     ::v-deep .editor-content {
-      padding: 8px 0;
+      padding: 0;
+    }
+
+    ::v-deep .ProseMirror p {
+      margin: 0;
     }
   }
 
 
@@ -109,24 +109,25 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     context: 'Description for the associate question type in the info modal',
   },
   correctPairsLabel: {
-    message: 'Correct pairs',
+    message: 'Matching pairs',
     context: 'Section header above the list of correctly associated pairs',
   },
   correctPairsDescription: {
-    message: 'Learners will see all options shuffled together',
-    context: 'Subtitle under the correct pairs header',
+    message:
+      'Learners match responses from a shuffled set to each prompt. Include distractors to increase difficulty.',
+    context: 'Subtitle under the matching pairs header',
   },
   distractorsLabel: {
-    message: 'Additional options',
-    context: 'Section header above the options that belong to no correct pair',
+    message: 'Distractors (optional)',
+    context: 'Section header above the choices that belong to no correct pair',
   },
   distractorsDescription: {
-    message: 'Options that are not part of any correct pair',
-    context: 'Subtitle under the additional options header',
+    message: "Extra items shown in the response pool that don't match any prompt",
+    context: 'Subtitle under the distractors header',
   },
   responsePoolLabel: {
-    message: 'Options (shuffled)',
-    context: 'Header above the shuffled pool of options learners will pick from',
+    message: 'Response pool (shuffled)',
+    context: 'Header above the shuffled pool of choices learners will pick from',
   },
   correctAnswersLabel: {
     message: 'Answers',
@@ -145,20 +146,20 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     context: 'Accessible label for the delete icon button next to a pair row',
   },
   addDistractorBtn: {
-    message: 'Add option',
-    context: 'Button that appends a new additional option',
+    message: 'Add distractor',
+    context: 'Button that appends a new distractor',
   },
   deleteDistractorBtn: {
-    message: 'Delete option {number}',
-    context: 'Accessible label for the delete icon button on an additional option',
+    message: 'Delete distractor {number}',
+    context: 'Accessible label for the delete icon button on a distractor',
   },
   editPairItemLabel: {
     message: 'Edit pair {number}, item {position}',
     context: 'Accessible label for the clickable region to edit one item of a pair',
   },
   editDistractorLabel: {
-    message: 'Edit option {number}',
-    context: 'Accessible label for the clickable region to edit an additional option',
+    message: 'Edit distractor {number}',
+    context: 'Accessible label for the clickable region to edit a distractor',
   },
   errorTooFewPairs: {
     message: '1 or more valid pairs are required',