report viewer: copy button floats over the text field's top-right corner (position:fixed below the header) instead of the toolbar; half-transparent, opaque on hover

src/report/view.html

@@ -11,9 +11,13 @@
   header a { color: inherit; }
   #path { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   #tabs { margin-left: auto; }
-  #copybtn { cursor: pointer; padding: 2px 10px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  /* copy floats over the text field's top-right corner: half-transparent,
+     opaque under the cursor */
+  #copybtn { position: fixed; top: 48px; right: 14px; z-index: 3; opacity: .45;
+             transition: opacity .15s; cursor: pointer; padding: 2px 10px;
+             border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
              background: canvas; color: inherit; border-radius: 4px; }
-  #copybtn:active { background: color-mix(in srgb, currentColor 15%, canvas); }
+  #copybtn:hover { opacity: 1; }
   #tabs button { padding: 2px 10px; cursor: pointer; border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
                  background: canvas; color: inherit; border-radius: 4px 0 0 4px; }
   #tabs button + button { border-radius: 0 4px 4px 0; border-left: 0; }
@@ -40,8 +44,8 @@
 <header>
   <span id="path"></span>
   <span id="tabs"></span>
-  <button id="copybtn" title="copy full text">⧉ copy</button>
 </header>
+<button id="copybtn" title="copy full text">⧉ copy</button>
 <div id="out"></div>
 <script>
 "use strict";