refactor(street-level): trim QA, tests, styles and docs

The browser gate is one pass over the remaining flows: rail strip and
expand, coverage with fixtures, the ON/OFF pill, 360° and SINCE filters,
KEY REJECTED, nearest photo with caption, × close, phone fit, keyless
KEY REQUIRED on a second page and no page errors. Panel controls are
pressed through the DOM; pick-point search, line/cone clicks, the
framing-cancel, reload/share and status-route probes, the second
viewport and pointer-settling retries are gone (unit tests cover them).

Tests that pinned constants, copy, CSS or source text, or repeated
another test, are removed or merged. CSS loses an unused variable and
duplicate rules. Docs describe the slimmed feature; unused exports and
the layer's dead setCoverageFilter/refreshCoverage surface are removed.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/ui/streetLevelControls.test.mjs

@@ -435,25 +435,6 @@ test('under KEY REQUIRED the filters are gated and the error line says how to ad
     controls.destroy();
   }));
 
-test('the legend rebuilds when a swatch changes, even at the same count', () =>
-  withDom(async (dom) => {
-    const { layer, controls } = stubPanel(dom, uiState());
-    const legend = dom.root.querySelector('#sl-legend');
-    const swatch = () => legend.children[0].children[0].style.background;
-    assert.equal(swatch(), '#05cb63');
-    layer.publish(
-      uiState({
-        legend: [
-          { key: 'mapillary', label: 'Mapillary', color: '#a66bff' },
-          { key: 'selected', label: 'Selected', color: '#00d4ff' },
-        ],
-      }),
-    );
-    assert.equal(legend.childElementCount, 2);
-    assert.equal(swatch(), '#a66bff');
-    controls.destroy();
-  }));
-
 test('the viewer is resized once when it opens, not on every render', () =>
   withDom(async (dom) => {
     const { layer, controls } = stubPanel(dom, uiState());

src/ui/streetLevelPresentation.test.mjs

@@ -2,7 +2,6 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import {
   presentStreetLevelPanel,
-  SINCE_STOPS,
   sinceStopIndex,
 } from './streetLevelPresentation.js';
 function snapshot(overrides = {}) {
@@ -51,14 +50,7 @@ function deepMerge(target, source) {
   return out;
 }
 
-test('a key-gated layer disables every control and flags KEY REQUIRED', () => {
-  const view = presentStreetLevelPanel(snapshot({ keyRequired: true }));
-  assert.equal(view.controlsDisabled, true);
-  assert.equal(view.status.text, 'KEY REQUIRED');
-  assert.equal(view.status.tone, 'warn');
-});
-
-test('KEY REQUIRED says how to add the key instead of a raw error code', () => {
+test('KEY REQUIRED disables every control and says how to add the key', () => {
   const view = presentStreetLevelPanel(
     snapshot({
       enabled: true,
@@ -66,7 +58,9 @@ test('KEY REQUIRED says how to add the key instead of a raw error code', () => {
       coverage: { error: 'no_key' },
     }),
   );
+  assert.equal(view.controlsDisabled, true);
   assert.equal(view.status.text, 'KEY REQUIRED');
+  assert.equal(view.status.tone, 'warn');
   assert.match(view.error, /^Mapillary: Needs MAPILLARY_CLIENT_TOKEN/);
 });
 
@@ -149,18 +143,10 @@ test('errors from the viewer or the coverage web surface in one alert', () => {
   );
 });
 
-test('the SINCE slider runs from any date on the left to the last month on the right', () => {
-  assert.deepEqual(
-    SINCE_STOPS.map((stop) => stop.days),
-    [0, 3652, 1826, 1095, 730, 365, 182, 91, 30],
-  );
+test('a SINCE window from a link lands on the nearest slider stop', () => {
   assert.equal(sinceStopIndex(0), 0);
   assert.equal(sinceStopIndex(365), 5);
-  assert.equal(
-    sinceStopIndex(400),
-    5,
-    'an off-stop link lands on the nearest stop',
-  );
+  assert.equal(sinceStopIndex(400), 5);
   assert.equal(sinceStopIndex(-4), 0);
 });
 

src/ui/styles/street-level.css

@@ -2,8 +2,7 @@
    The rail owns position and width (layers.css). */
 #street-level-panel {
   --sl-green: #05cb63;
-  --sl-text: 0.62rem;
-  --sl-text-small: 0.6rem;
+  --sl-text: 0.6rem;
 }
 
 #street-level-panel .panel-glow {
@@ -44,30 +43,24 @@
 }
 
 .sl-status {
+  background: transparent;
+  font: inherit;
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   letter-spacing: 0.1em;
   padding: 2px 7px;
   border-radius: 999px;
   border: 1px solid var(--glass-border-hover);
   color: var(--text-secondary);
   white-space: nowrap;
-}
-
-button.sl-status {
-  background: transparent;
-  font: inherit;
-  font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
-  letter-spacing: 0.1em;
   cursor: pointer;
   transition:
     border-color var(--transition-fast),
     color var(--transition-fast);
 }
 
-button.sl-status:hover,
-button.sl-status:focus-visible {
+.sl-status:hover,
+.sl-status:focus-visible {
   color: var(--text-primary);
   border-color: var(--accent);
   outline: none;
@@ -94,24 +87,25 @@ button.sl-status:focus-visible {
   display: none;
 }
 
-.sl-body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 0;
-}
-
-.sl-main {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 0;
-}
-
+.sl-body,
+.sl-main,
+.sl-settings,
 .sl-controls {
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
+
+.sl-body,
+.sl-settings {
+  min-height: 0;
+}
+
+.sl-main {
+  min-width: 0;
+}
+
+.sl-controls {
   min-width: 0;
   margin: 0;
   padding: 0;
@@ -123,13 +117,6 @@ button.sl-status:focus-visible {
   pointer-events: none;
 }
 
-.sl-settings {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 0;
-}
-
 /* ── Errors ──────────────────────────────────────────────────────────────── */
 .sl-error {
   font-family: var(--font-sans);
@@ -156,7 +143,7 @@ button.sl-status:focus-visible {
 
 .sl-seg-btn {
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   letter-spacing: 0.08em;
   padding: 4px 9px;
   border: 0;
@@ -211,7 +198,7 @@ button.sl-status:focus-visible {
 .sl-since-label {
   grid-column: 2;
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   letter-spacing: 0.08em;
   color: var(--text-primary);
 }
@@ -230,7 +217,7 @@ button.sl-status:focus-visible {
   align-items: center;
   gap: 6px;
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   letter-spacing: 0.06em;
   color: var(--text-secondary);
 }
@@ -322,7 +309,7 @@ button.sl-status:focus-visible {
 
 .sl-viewer-tools .scene-btn {
   padding: 4px 8px;
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   background: rgba(10, 10, 15, 0.75);
   flex: none;
   min-width: 0;
@@ -372,7 +359,7 @@ button.sl-status:focus-visible {
   flex: 0 0 auto;
   padding: 6px 10px;
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   letter-spacing: 0.06em;
   color: var(--text-secondary);
   background: rgba(0, 0, 0, 0.7);
@@ -418,7 +405,7 @@ button.sl-status:focus-visible {
 
 .sl-meta {
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: var(--sl-text);
   letter-spacing: 0.06em;
   color: var(--text-secondary);
 }