Fix what the review confirmed: anchoring, overlap, honesty, one voice

Fourteen findings from an adversarial review pass, applied together because
most share two roots — geometry written against assumptions the renderer does
not hold, and a design language spelled out longhand until it drifted.

Correctness. The leader line pointed at empty space: CSS2DObject centres a
label on its anchor by default, and margin only nudges the centred box — the
overlay now anchors the left edge (center 0, 0.5) so the hairline meets the
star. The info panel and not-found panel returned to top-4 at sm, under a
search field that is 26rem wide and centred, covering the back button on
every viewport from 640 to 1088px; they now wait for xl. The search empty
state asserted "nothing matches" while the catalogues were still loading —
and forever if they failed — so it now waits for the index. "Matches 8" was
the page size wearing the costume of a count; the header now reports the
real total, with the cap stated when it bites. The nameplate un-hides at lg
instead of sm, clear of the rail and the object card. theme-color matches
the void again.

Accessibility. Tabbing to search changed one hairline's hue; the wrapper now
carries the old ring as a visible focus indicator.

Structure. hud-surface names the panel recipe that had been inlined at seven
sites and had already forked into /85 and /92; the backdrop blur it carried
is gone from every near-opaque panel — the canvas beneath redraws every
frame, so each blur was re-sampled continuously for an effect the fill hid —
and survives only as blur-sm on the genuinely translucent search shell.
type-label and type-eyebrow name the two label voices, retiring 0.14em and
the stray hover:bg-accent/10. The Measured/Derived rows both cards pasted
twice each live once in ReadoutSectionsComponent; the reticle and chevron
each draw from a single geometry, the reticle's stroke held in screen pixels
so one mark serves every size. The acquire wipe plays once per search, not
once per keystroke, because both outcomes now share one panel. hud-banner,
which styled nothing since the rule was deleted, is a data-testid — the
convention its own file already used.

527 unit tests, 6/6 end-to-end, production build, and a driven screenshot:
every label now hangs off its star with the hairline touching the point.

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

src/app/features/galaxy-system/system-object-card.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, computed, input, output } from '@an
 
 import { BodyDetailViewModel } from '../body-detail/body-detail.model';
 import { bodyReadouts } from '../body-detail/body-readouts';
+import { ReadoutSectionsComponent } from '../body-detail/readout-sections.component';
+import { ChevronIconComponent } from '../../shared/ui/chevron-icon.component';
 
 /**
  * The card shown for a body picked in the system view, without leaving it.
@@ -11,11 +13,13 @@ import { bodyReadouts } from '../body-detail/body-readouts';
  * shows the same numbers over the live view, and keeps the route as the deliberate step for the
  * full 3D inspection.
  *
- * The rows themselves come from `bodyReadouts`, shared with the detail page. Presentational only.
+ * The rows come from `bodyReadouts` via `ReadoutSectionsComponent`, both shared with the detail
+ * page. Presentational only.
  */
 @Component({
   selector: 'app-system-object-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ChevronIconComponent, ReadoutSectionsComponent],
   // Positioned and full-bleed like the HUD's own host, so the panel inside it resolves against
   // the scene rather than against whatever box the inline default would have left it in — which
   // put the card off the bottom-left corner of the viewport entirely.
@@ -23,14 +27,14 @@ import { bodyReadouts } from '../body-detail/body-readouts';
   template: `
     <!-- Positioning and panel styling stay on separate elements, so the panel's own layout
          never fights the absolute placement. Same organism as the detail page's info panel:
-         header, full-bleed readout rows, provenance, and a route rail — there at the top,
-         here at the bottom, because here the route is the next step rather than the way back. -->
+         header, shared readout sections, and a route rail — there at the top, here at the
+         bottom, because here the route is the next step rather than the way back. -->
     <div class="pointer-events-auto absolute top-16 right-6 w-80 max-w-[calc(100%-3rem)]">
-      <div data-testid="object-card" class="hud-brackets hud-acquire border border-border/60 bg-panel/92 font-body text-text backdrop-blur-md">
+      <div data-testid="object-card" class="hud-brackets hud-acquire hud-surface font-body text-text">
         <div class="flex items-start justify-between gap-3 px-4 pt-4 pb-3">
           <header class="min-w-0">
             <p class="truncate text-lg leading-tight font-bold tracking-[0.04em] text-text uppercase">{{ body().name }}</p>
-            <p class="mt-1 truncate text-[10px] tracking-[0.18em] text-accent uppercase">{{ readouts().kindLabel }} · {{ body().hostStarName }}</p>
+            <p class="type-eyebrow mt-1 truncate text-accent">{{ readouts().kindLabel }} · {{ body().hostStarName }}</p>
           </header>
           <button
             type="button"
@@ -44,39 +48,15 @@ import { bodyReadouts } from '../body-detail/body-readouts';
           </button>
         </div>
 
-        @if (readouts().measured.length) {
-          <p class="border-t border-border/40 px-4 pt-3 pb-1 text-[10px] tracking-[0.16em] text-muted uppercase">Measured</p>
-          <dl class="divide-y divide-border/25">
-            @for (row of readouts().measured; track row.label) {
-              <div class="flex items-baseline justify-between gap-4 px-4 py-2">
-                <dt class="text-[10px] tracking-[0.16em] text-muted uppercase">{{ row.label }}</dt>
-                <dd class="text-sm tabular-nums">{{ row.value }}</dd>
-              </div>
-            }
-          </dl>
-        }
-
-        <p class="border-t border-border/40 px-4 pt-3 pb-1 text-[10px] tracking-[0.16em] text-muted uppercase">Derived</p>
-        <dl class="divide-y divide-border/25">
-          @for (row of readouts().derived; track row.label) {
-            <div class="flex items-baseline justify-between gap-4 px-4 py-2">
-              <dt class="text-[10px] tracking-[0.16em] text-muted uppercase">{{ row.label }}</dt>
-              <dd class="text-sm tabular-nums">{{ row.value }}</dd>
-            </div>
-          }
-        </dl>
-
-        <p class="border-t border-border/40 px-4 py-3 text-[10px] leading-relaxed text-muted">{{ readouts().provenance }}</p>
+        <app-readout-sections [readouts]="readouts()" />
 
         <button
           type="button"
           (click)="openRequested.emit()"
-          class="flex w-full items-center justify-center gap-1.5 border-t border-border/40 px-3 py-2 text-[10px] tracking-[0.16em] text-muted uppercase transition-colors hover:bg-accent/8 hover:text-accent focus-visible:bg-accent/12 focus-visible:text-accent focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
+          class="type-label flex w-full items-center justify-center gap-1.5 border-t border-border/40 px-3 py-2 text-muted transition-colors hover:bg-accent/8 hover:text-accent focus-visible:bg-accent/12 focus-visible:text-accent focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
         >
           Full view
-          <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M9 6l6 6-6 6" />
-          </svg>
+          <app-chevron-icon class="h-3 w-3" direction="right" />
         </button>
       </div>
     </div>