From 183e651c4c4bb5d459cc98e52b08c01ac7e20802 Mon Sep 17 00:00:00 2001
From: Sameh Khamis <sameh@halfpixel.ai>
Date: Sun, 1 Nov 2026 17:05:35 -0800
Subject: [PATCH] Show Cyber's edge lines beside open panels, on both sides

With the panel rails, the left stack's red edge line stood alone beside
the rail whenever no panel was open. It now shows only while a left panel
is open, and the right stack gains the mirrored line for its open panel.
The right stack takes the line and its gap without moving its panels, so
its rail sits outside the line like the left one.
---
 src/ui/cyberTheme.test.mjs | 11 ++++++++++-
 src/ui/styles/cyber.css    | 22 +++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/ui/cyberTheme.test.mjs b/src/ui/cyberTheme.test.mjs
index 3ac1a6172..9b02b3de7 100644
--- a/src/ui/cyberTheme.test.mjs
+++ b/src/ui/cyberTheme.test.mjs
@@ -780,7 +780,16 @@ test('the Display selector, voice schema and final stylesheet expose Cyber', ()
   assert.match(cyberStyles, /flex: 1 1 auto;/);
   assert.match(cyberStyles, /#left-panel-stack:has/);
   assert.match(cyberStyles, /left: calc\(54px \+ var\(--panel-rail-clearance\)\);/);
-  assert.match(cyberStyles, /right: calc\(62px \+ var\(--panel-rail-clearance\)\);/);
+  assert.match(cyberStyles, /right: calc\(51px \+ var\(--panel-rail-clearance\)\);/);
+  // Each side's edge line shows only beside an open panel.
+  assert.match(
+    cyberStyles,
+    /#left-panel-stack:has\(> \[data-panel-id\]:not\(\.collapsed, \[hidden\]\)\) \{\s*border-left-color:/,
+  );
+  assert.match(
+    cyberStyles,
+    /#right-context-rail:has\(> \[data-panel-id\]:not\(\.collapsed, \[hidden\]\)\) \{\s*border-right-color:/,
+  );
   assert.match(cyberStyles, /bottom: calc\(2vh \+ 13rem\);/);
   assert.doesNotMatch(cyberStyles, /NAV 01  \/\/  COMMAND BUS  \/\/  VIS 03/);
   assert.match(cyberStyles, /data-layer-id='satellites'/);
diff --git a/src/ui/styles/cyber.css b/src/ui/styles/cyber.css
index 4f5b4f9f9..33e0993d1 100644
--- a/src/ui/styles/cyber.css
+++ b/src/ui/styles/cyber.css
@@ -1661,7 +1661,20 @@
     left: calc(54px + var(--panel-rail-clearance));
     width: 300px;
     padding-left: 10px;
-    border-left: 1px solid rgba(196, 84, 84, 0.72);
+    border-left: 1px solid transparent;
+  }
+
+  /* An edge line marks each side's open panel, mirrored left and right. */
+  :root[data-ui-theme='cyber']
+    body:not(.cockpit-mode)
+    #left-panel-stack:has(> [data-panel-id]:not(.collapsed, [hidden])) {
+    border-left-color: rgba(196, 84, 84, 0.72);
+  }
+
+  :root[data-ui-theme='cyber']
+    body:not(.cockpit-mode)
+    #right-context-rail:has(> [data-panel-id]:not(.collapsed, [hidden])) {
+    border-right-color: rgba(196, 84, 84, 0.72);
   }
 
   :root[data-ui-theme='cyber']
@@ -1740,8 +1753,11 @@
   :root[data-ui-theme='cyber'] #right-context-rail {
     --right-display-collapsed-width: var(--cyber-panel-collapsed-width);
     --right-context-collapsed-width: var(--cyber-panel-collapsed-width);
-    right: calc(62px + var(--panel-rail-clearance));
-    width: 312px;
+    /* The edge line and its gap keep the panels where they were. */
+    right: calc(51px + var(--panel-rail-clearance));
+    width: 323px;
+    padding-right: 10px;
+    border-right: 1px solid transparent;
   }
 
   /* The map rails now use one visible expanded width. Keeping the rail itself