fix: hide overlay focus ring

changes/336-overlay-focus-ring.md

@@ -0,0 +1,4 @@
+type: fixed
+area: overlay
+
+- Hid the browser focus outline on the top-level overlay surface so focused overlays no longer show a yellow/orange viewport border.

src/renderer/overlay-legacy-cleanup.test.ts

@@ -28,6 +28,11 @@ test('renderer stylesheet no longer contains invisible-layer selectors', () => {
   assert.doesNotMatch(cssSource, /body\.layer-invisible/);
 });
 
+test('renderer stylesheet hides focus chrome on top-level overlay focus targets', () => {
+  const cssSource = readWorkspaceFile('src/renderer/style.css');
+  assert.match(cssSource, /html:focus,\s*body:focus,\s*#overlay:focus\s*\{[^}]*outline:\s*none;/s);
+});
+
 test('top-level readme avoids stale overlay-layers wording', () => {
   const readmeSource = readWorkspaceFile('README.md');
   assert.doesNotMatch(readmeSource, /overlay layers/i);

src/renderer/style.css

@@ -40,6 +40,12 @@ body {
     'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Arial Unicode MS', Arial, sans-serif;
 }
 
+html:focus,
+body:focus,
+#overlay:focus {
+  outline: none;
+}
+
 :root {
   --subtitle-sidebar-reserved-width: 0px;