Move the remove cross to the tile's corner

- On the top-right corner, where Zoom and Teams both put it
- Centred, it sat inside the target for choosing the tile: the one
  destructive action lived exactly where the ordinary one does, which is
  what was confusing people
- Red under the pointer. That alone would not have fixed it: colour says
  what a control does, it does not stop the press landing on the wrong one
- The one in force still offers no removal (FR-025). The corner would
  allow it, since cross and tick no longer compete for the middle, but
  that stays product's call

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/MediaMuteAndSwitchButton.module.css

@@ -338,20 +338,34 @@ Please see LICENSE in the repository root for full details.
  */
 .effectRemove {
   position: absolute;
-  inset-block-start: 50%;
+  /* On the tile's top-right corner, where Zoom and Teams both put it, and
-  inset-inline-start: 50%;
+     clear of the middle: centred, it sat inside the target for choosing the
-  translate: -50% -50%;
+     tile, so the one destructive action lived where the ordinary one does. */
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  translate: 30% -30%;
   display: none;
   align-items: center;
   justify-content: center;
-  inline-size: 24px;
+  inline-size: 22px;
-  block-size: 24px;
+  block-size: 22px;
   border-radius: 50%;
   background: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-icon-primary);
+  box-shadow: 0 0 0 var(--cpd-border-width-1)
+    var(--cpd-color-border-interactive-secondary);
   cursor: pointer;
 }
 
+/* Red under the pointer: the corner separates it from choosing the tile, and
+   this says what it will do once you are there. */
+.effectRemove:hover {
+  background: var(--cpd-color-bg-critical-subtle);
+  color: var(--cpd-color-icon-critical-primary);
+  box-shadow: 0 0 0 var(--cpd-border-width-1)
+    var(--cpd-color-border-critical-primary);
+}
+
 .effectGrid .effectTileWrap:hover .effectRemove,
 .effectGrid .effectTileWrap:focus-within .effectRemove {
   display: flex;