add color shading for score

src/lib/DatasetViewer.svelte

@@ -278,6 +278,25 @@
     return match?.label || "";
   }
 
+  // Return a CSS class name for coloring scores (low/medium/high)
+  function getScoreClass(scoreValue: number): string {
+    // More fine-grained buckets across the 1.0-5.0 range
+    // 1.0 - 1.99 -> very-low
+    // 2.0 - 2.49 -> low
+    // 2.5 - 2.99 -> medium-low
+    // 3.0 - 3.49 -> medium
+    // 3.5 - 3.99 -> medium-high
+    // 4.0 - 4.49 -> high
+    // 4.5 - 5.0+ -> very-high
+    if (scoreValue >= 4.5) return "score-very-high";
+    if (scoreValue >= 4.0) return "score-high";
+    if (scoreValue >= 3.5) return "score-medium-high";
+    if (scoreValue >= 3.0) return "score-medium";
+    if (scoreValue >= 2.5) return "score-medium-low";
+    if (scoreValue >= 2.0) return "score-low";
+    return "score-very-low";
+  }
+
   // Filter comparisons by selected category
   function getFilteredComparisons(score: EquivalencyScore | null) {
     if (!score || !score.comparisons) return [];
@@ -473,7 +492,9 @@
                 </span>
               </span>
             </span>
-            <strong>{score.aggregated_similarity_score.toFixed(2)}</strong>
+            <strong class={getScoreClass(score.aggregated_similarity_score)}
+              >{score.aggregated_similarity_score.toFixed(2)}</strong
+            >
           </div>
 
           {#if score.comparative_law_note}
@@ -527,7 +548,9 @@
                           › {formatCategoryName(comparison.subcategory)}
                         </span>
                       {/if}
-                      <span class="comparison-score"
+                      <span
+                        class={"comparison-score " +
+                          getScoreClass(comparison.similarity_score)}
                         >{comparison.similarity_score.toFixed(2)}</span
                       >
                     </div>
@@ -965,14 +988,66 @@
 
   .comparison-score {
     margin-left: auto;
-    background: #646cff;
-    color: white;
     padding: 0.25rem 0.75rem;
     border-radius: 12px;
     font-weight: 600;
     font-size: 0.9rem;
   }
 
+  /* Score color variants */
+  .comparison-score.score-high {
+    background: #1a7f37;
+    color: white;
+  }
+  .comparison-score.score-medium {
+    background: #d98200;
+    color: white;
+  }
+  .comparison-score.score-low {
+    background: #c33;
+    color: white;
+  }
+
+  .score-high {
+    color: #1a7f37;
+  }
+  .score-medium {
+    color: #d98200;
+  }
+  .score-low {
+    color: #c33;
+  }
+  /* Fine-grained score variants */
+  .comparison-score.score-very-high {
+    background: #0f6b2d;
+    color: white;
+  }
+  .comparison-score.score-medium-high {
+    background: #2e9a44;
+    color: white;
+  }
+  .comparison-score.score-medium-low {
+    background: #f39c12;
+    color: white;
+  }
+  .comparison-score.score-very-low {
+    background: #9b1f1f;
+    color: white;
+  }
+
+  .score-very-high {
+    color: #0f6b2d;
+  }
+  .score-medium-high {
+    color: #2e9a44;
+  }
+  .score-medium-low {
+    color: #f39c12;
+  }
+  .score-very-low {
+    color: #9b1f1f;
+  }
+
   .comparison-meta {
     display: flex;
     gap: 1rem;