fix(scope-audit): neutral grey for unobserved scopes, green only for observed

public/scope-audit.css

@@ -35,7 +35,6 @@
   font-size: 11px; font-family: var(--mono); white-space: nowrap;
 }
 .sa-chip-declared { background: var(--section-bg, var(--card-bg)); color: var(--text); border: 1px solid var(--border); }
-.sa-chip-missing { background: color-mix(in srgb, var(--status-red) 16%, transparent); color: var(--danger); }
 .sa-chip-undeclared { background: color-mix(in srgb, var(--status-yellow) 18%, transparent); color: var(--status-amber-text); }
 .sa-chip-wildcard { background: var(--section-bg, var(--card-bg)); color: var(--text-muted); font-weight: 700; }
 .sa-chip-ambiguous { background: var(--section-bg, var(--card-bg)); color: var(--text-muted); border: 1px dashed var(--border); font-family: inherit; font-style: italic; }
@@ -54,6 +53,12 @@
 }
 
 /* Observed forwarding, the green half of the merged Scopes column. Pairs with
-   .sa-chip-missing above, which keeps the red. Same colour-mix construction so
-   the two read as one scale rather than two unrelated styles. */
+   .sa-chip-unobserved below, which stays neutral. Only the observed side is
+   coloured: red on every unobserved region would read as an alarm on rows that
+   are often just a quiet region over a short window. */
 .sa-chip-observed { background: color-mix(in srgb, var(--status-green) 16%, transparent); color: var(--status-green-text); }
+
+/* Declared but not observed in this window. Deliberately NOT red: absence over
+   a short window is weak evidence, which the page header says in words, so it
+   should not shout in colour. */
+.sa-chip-unobserved { background: var(--section-bg, var(--card-bg)); color: var(--text-muted); border: 1px solid var(--border); }

public/scope-audit.js

@@ -76,7 +76,7 @@
     row.notObserved.forEach(function (n) { missing[n] = true; });
     var chips = row.declaredRegions.map(function (n) {
       var observed = !missing[n];
-      return '<span class="sa-chip ' + (observed ? 'sa-chip-observed' : 'sa-chip-missing') +
+      return '<span class="sa-chip ' + (observed ? 'sa-chip-observed' : 'sa-chip-unobserved') +
         '" title="' + escapeHtml(n) +
         (observed ? ': observed forwarding in this window' : ': declared, but no forwarding observed in this window') +
         '">' + escapeHtml(n) + '</span>';

test-frontend-helpers.js

@@ -6984,12 +6984,12 @@ console.log('\n=== scope-audit.js: mergedScopeChips ===');
   test('a declared region absent from notObserved renders as observed', () => {
     const h = chips(row(['be'], []));
     assert.ok(h.includes('sa-chip-observed'), 'should carry the observed class');
-    assert.ok(!h.includes('sa-chip-missing'), 'and not the missing one');
+    assert.ok(!h.includes('sa-chip-unobserved'), 'and not the unobserved one');
   });
 
-  test('a declared region present in notObserved renders as missing', () => {
+  test('a declared region present in notObserved renders as unobserved, not as an alarm', () => {
     const h = chips(row(['be'], ['be']));
-    assert.ok(h.includes('sa-chip-missing'));
+    assert.ok(h.includes('sa-chip-unobserved'));
     assert.ok(!h.includes('sa-chip-observed'));
   });
 
@@ -6998,7 +6998,7 @@ console.log('\n=== scope-audit.js: mergedScopeChips ===');
     // 8 regions of which 6 are unobserved, so the observed ones are the needle.
     const h = chips(row(['be', 'eu', 'nl'], ['eu', 'nl']));
     assert.strictEqual((h.match(/sa-chip-observed/g) || []).length, 1);
-    assert.strictEqual((h.match(/sa-chip-missing/g) || []).length, 2);
+    assert.strictEqual((h.match(/sa-chip-unobserved/g) || []).length, 2);
     assert.strictEqual((h.match(/<span/g) || []).length, 3, 'one chip per declared region, no more');
   });