Merge main, carrying the observatory instrument onto its rebuilt chrome

Two HUD redesigns happened in parallel: this branch restyled the old chrome
as a precision observatory instrument, while main rebuilt the chrome against
screenshots of the Star Citizen starmap — a scale ladder, a nameplate, a
readout panel, and two-line labels that say what a thing is, not just what
it is called.

This merge keeps everything main's rebuild learned and says it in this
branch's voice. Kept: the ladder's reachability semantics and test hooks,
the two-line name/kind labels and their shared declutter logic, system-view
body labels, every readout. Restyled: chamfered clip-path panels become
hairline frames with corner-tick brackets; Orbitron is gone and one readout
face carries the hierarchy; the hexagon reticle becomes the same
circle-and-ticks mark the search field wears; focus states move to real
focus-visible outlines; the long uppercase caveat notes drop to sentence
case so they read as sentences.

Two merge-borne fixes along the way: the labels' translate offset moved into
.map-label as a margin (CSS2DRenderer rewrites the inline transform every
frame, the margin is the offset it cannot touch), and the info panel's new
Derived section picked up the horizontal padding it lost when the panel
moved to per-block padding.

Verified: build clean, 496/496 unit, 6/6 e2e (on a free port — 4300 is
occupied on this machine), design detector clean, screenshots reviewed at
1440x900 and 390x844 across all four views plus search states.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jxMkwA2rbicdGxHosecYi

src/app/features/search/search.component.ts

@@ -3,18 +3,7 @@ import { Router } from '@angular/router';
 
 import { DataLoaderService } from '../../core/data/data-loader.service';
 import { NavigationStore } from '../../shared/state/navigation.store';
-
-type SearchResultKind = 'star' | 'body' | 'exoplanet';
-
-interface SearchEntry {
-  kind: SearchResultKind;
-  name: string;
-  subtitle: string;
-  /** HYG star id, for `kind: 'star'` results. */
-  starId?: number;
-  /** `bodies.json`/`exoplanets.json` id, for `kind: 'body' | 'exoplanet'` results. */
-  bodyId?: string;
-}
+import { buildSearchIndex, IndexedSearchEntry, rankSearchResults, SearchEntry, SearchResultKind } from './search-ranking';
 
 const MAX_RESULTS = 8;
 const MIN_QUERY_LENGTH = 2;
@@ -76,27 +65,19 @@ const KIND_LABELS: Record<SearchResultKind, string> = {
 })
 export class SearchComponent {
   readonly query = signal('');
-  private readonly index = signal<SearchEntry[]>([]);
+  /** Pre-normalised once on load; re-deriving it per keystroke would stutter the render loop. */
+  private readonly index = signal<IndexedSearchEntry[]>([]);
 
   /** True once the query is long enough to have been searched — so "no matches" is only ever
    *  reported about a search that actually ran, never about a half-typed word. */
   readonly hasQuery = computed(() => this.query().trim().length >= MIN_QUERY_LENGTH);
 
   readonly results = computed(() => {
-    const query = this.query().trim().toLowerCase();
+    const query = this.query().trim();
     if (query.length < MIN_QUERY_LENGTH) {
       return [];
     }
-    const matches: SearchEntry[] = [];
-    for (const entry of this.index()) {
-      if (entry.name.toLowerCase().includes(query)) {
-        matches.push(entry);
-        if (matches.length >= MAX_RESULTS) {
-          break;
-        }
-      }
-    }
-    return matches;
+    return rankSearchResults(this.index(), query, MAX_RESULTS);
   });
 
   constructor(
@@ -143,7 +124,7 @@ export class SearchComponent {
         ...exoplanets.map((exoplanet): SearchEntry => ({ kind: 'exoplanet', name: exoplanet.name, subtitle: exoplanet.hostStarName, bodyId: exoplanet.id }))
       ];
 
-      this.index.set(entries);
+      this.index.set(buildSearchIndex(entries));
     } catch (error) {
       console.error('Failed to build the search index.', error);
     }