Expand backlog list and refresh quick table copy

hdyc-svelte/src/lib/components/QuickConversionTable.svelte

@@ -18,11 +18,15 @@
 
   let rows: Row[] = [];
   let supportsTable = false;
+  let inputLabel = 'source units';
+  let outputLabel = 'target units';
 
   $: supportsTable = ['standard', 'inverse'].includes(config.type);
   $: rows = supportsTable
     ? numericSamples.map(buildRow)
     : [];
+  $: inputLabel = config.labels?.in1 ?? 'source units';
+  $: outputLabel = config.labels?.in2 ?? 'target units';
 </script>
 
 {#if supportsTable && rows.length}
@@ -36,9 +40,13 @@
     <div class="chart-grid">
       {#each rows as row}
         <div class="chart-row">
-          <span class="chart-input">{row.input}</span>
-          <span class="chart-divider">→</span>
-          <span class="chart-output">{row.output} {config.labels.in2}</span>
+          <p class="chart-problem">
+            If you convert {row.input} {inputLabel} into {outputLabel}, how many {outputLabel} will you record?
+          </p>
+          <p class="chart-answer">
+            <span class="chart-answer-value">{row.output}</span>
+            <span class="chart-answer-unit">{outputLabel}</span>
+          </p>
         </div>
       {/each}
     </div>
@@ -69,25 +77,33 @@
   .chart-grid {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.75rem;
   }
 
   .chart-row {
-    display: flex;
-    align-items: baseline;
-    gap: 0.35rem;
     font-size: 0.95rem;
+    line-height: 1.4;
   }
 
-  .chart-input {
+  .chart-problem {
+    margin: 0;
     font-weight: 600;
   }
 
-  .chart-divider {
+  .chart-answer {
+    margin: 0.15rem 0 0;
+    font-size: 0.95rem;
+    font-weight: 500;
     color: var(--text-muted);
   }
 
-  .chart-output {
-    font-weight: 500;
+  .chart-answer-value {
+    margin-right: 0.25rem;
+    font-weight: 600;
+    color: var(--text);
+  }
+
+  .chart-answer-unit {
+    font-variant: petite-caps;
   }
 </style>