Remove the HUD top bar that no layout shows

Operator was the only layout that displayed the top banner bar. Its markup, styles and keep-out selectors are removed, and the Cyber style test now checks that none remain.

docs/CURRENT-STATE.md

@@ -236,7 +236,9 @@ restoration and both Scope presentations. `QA_SCREENSHOT_DIR` saves screenshots.
 Display > HUD > Layout offers Tactical, Minimal and Cyber; the `set_hud` voice
 action accepts the same three. The Operator layout is retired. Share links
 keep its enum code so older links still parse, and a link, scene or saved state
-that names Operator restores the default Tactical layout.
+that names Operator restores the default Tactical layout. Operator was the
+only layout that showed the HUD's top banner bar, so its markup and styles are
+removed too.
 
 ## Cyber HUD — September 30, 2026
 

scripts/qa-scope-hud.mjs

@@ -564,7 +564,7 @@ try {
           );
         });
       const broadBackings = [
-        ...hud.querySelectorAll('.hud-corner, .hud-top-bar, .hud-bottom-bar'),
+        ...hud.querySelectorAll('.hud-corner, .hud-bottom-bar'),
       ].filter(
         (el) =>
           el.offsetWidth > 0 &&

src/hud.js

@@ -288,12 +288,6 @@ export class IntelHUD {
     this._el.innerHTML = `
       <div class="hud-sonar" aria-hidden="true"></div>
 
-      <div class="hud-top-bar">
-        <span class="hud-readout"><span class="hud-top-bar-left">TOP SECRET // SI-TK // NOFORN</span></span>
-        <span class="hud-readout"><span class="hud-top-bar-center">${this._missionId}</span></span>
-        <span class="hud-readout"><span class="hud-top-bar-right">PAGE 1/1</span></span>
-      </div>
-
       <div class="hud-corner hud-top-left">
         <div class="hud-bracket">┌</div>
         <div class="hud-content">

src/overlays/worldOverlay.js

@@ -114,7 +114,6 @@ export const WORLD_OVERLAY_OCCLUDER_SELECTORS = Object.freeze([
   '.hud-top-right',
   '.hud-bottom-left',
   '.hud-bottom-right',
-  '.hud-top-bar',
   '.hud-bottom-bar',
   '#space-mission-panel',
   '#space-mission-panel-host',

src/ui/cyberTheme.test.mjs

@@ -717,10 +717,7 @@ test('the Display selector, voice schema and final stylesheet expose Cyber', ()
   assert.match(cyberStyles, /\.hud-top-left/);
   assert.match(cyberStyles, /transparent 0 min\(40vw, 52vh\)/);
   assert.match(cyberStyles, /\.hud-bottom-bar \{\s*display: none;/);
-  assert.match(
-    cyberStyles,
-    /#intel-hud\[data-variant='cyber'\] \.hud-top-bar \{\s*display: none;/,
-  );
+  assert.doesNotMatch(cyberStyles, /\.hud-top-bar/);
   // Cyber shares the measured rail/credit keep-out rather than overriding it.
   assert.doesNotMatch(
     cyberStyles,

src/ui/panelLayoutController.js

@@ -20,7 +20,6 @@ const LEFT_STACK_OBSTACLE_SELECTOR = [
   '#intel-hud .hud-top-right',
   '#intel-hud .hud-bottom-left',
   '#intel-hud .hud-bottom-right',
-  '#intel-hud .hud-top-bar',
   '#intel-hud .hud-bottom-bar',
   '#intel-hud .hud-left-edge',
   '#intel-hud .hud-right-edge',
@@ -50,7 +49,6 @@ const RIGHT_STACK_OBSTACLE_SELECTOR = [
   '#intel-hud .hud-top-right',
   '#intel-hud .hud-bottom-left',
   '#intel-hud .hud-bottom-right',
-  '#intel-hud .hud-top-bar',
   '#intel-hud .hud-bottom-bar',
   '#intel-hud .hud-left-edge',
   '#intel-hud .hud-right-edge',

src/ui/styles/cyber.css

@@ -1558,10 +1558,6 @@
   clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
 }
 
-#intel-hud[data-variant='cyber'] .hud-top-bar {
-  display: none;
-}
-
 /* Cyber keeps the useful style and locality readouts, not fictional IDs. */
 #intel-hud[data-variant='cyber'] .hud-top-left .hud-classification,
 #intel-hud[data-variant='cyber'] .hud-top-left .hud-system {
@@ -1861,7 +1857,6 @@
     background-size: 78px 78px;
   }
 
-  #intel-hud[data-variant='cyber'] .hud-top-bar,
   #intel-hud[data-variant='cyber'] .hud-bottom-bar {
     display: none;
   }

src/ui/styles/mobile-shell.css

@@ -107,7 +107,6 @@ body.mobile-shell #top-center-actions {
 /* ── HUD: one compact readout under the top bar ────────────────────────── */
 body.mobile-shell #intel-hud .hud-edge,
 body.mobile-shell #intel-hud .hud-corner,
-body.mobile-shell #intel-hud .hud-top-bar,
 body.mobile-shell #intel-hud .hud-bottom-bar {
   display: none;
 }

src/ui/styles/overlays.css

@@ -124,7 +124,6 @@
   line-height: 1.6;
 }
 
-.hud-top-bar,
 .hud-bottom-bar {
   display: none;
   position: absolute;
@@ -141,24 +140,11 @@
   pointer-events: none;
 }
 
-.hud-top-bar {
-  top: 70px;
-}
-
 .hud-bottom-bar {
   bottom: 110px;
   justify-content: center;
 }
 
-.hud-top-bar-center {
-  opacity: 0.84;
-}
-
-.hud-top-bar-left,
-.hud-top-bar-right {
-  opacity: 0.6;
-}
-
 /* Corner blocks */
 .hud-corner {
   position: absolute;
@@ -298,7 +284,6 @@
   gap: 20px;
 }
 
-#intel-hud[data-variant='tactical'] .hud-top-bar,
 #intel-hud[data-variant='tactical'] .hud-bottom-bar {
   display: none;
 }
@@ -391,13 +376,13 @@
 
 :root[data-scope-mask='off']
   #intel-hud[data-variant='minimal']
-  :is(.hud-top-bar, .hud-bottom-bar) {
+  .hud-bottom-bar {
   background: transparent;
 }
 
 :root[data-scope-mask='off']
   #intel-hud[data-variant='minimal']
-  :is(.hud-top-bar, .hud-bottom-bar) {
+  .hud-bottom-bar {
   width: fit-content;
   max-width: calc(100vw - 120px);
   gap: 24px;
@@ -405,7 +390,7 @@
 
 :root[data-scope-mask='off']
   #intel-hud[data-variant='minimal']
-  :is(.hud-top-bar, .hud-bottom-bar)
+  .hud-bottom-bar
   .hud-readout {
   overflow: hidden;
   white-space: nowrap;

src/ui/styles/responsive.css

@@ -98,18 +98,12 @@
     display: none;
   }
 
-  .hud-top-bar,
   .hud-bottom-bar {
     width: calc(100vw - 24px);
     left: 12px;
     transform: none;
   }
 
-  .hud-top-bar {
-    top: 54px;
-    font-size: 9px;
-  }
-
   .hud-bottom-bar {
     bottom: 90px;
     font-size: 9px;