.sm-video-handedness {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.sm-video-handedness[hidden] {
  display: none;
}

.sm-video-handedness-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 0 6px;
}

.sm-video-handedness-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.sm-video-handedness-button:hover,
.sm-video-handedness-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.sm-video-handedness-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sm-video-handedness-button img {
  display: block;
  width: 18px;
  height: 18px;
  filter: invert(1);
}

/* SM-542: a video element can be promoted to a Windows DirectComposition
 * HARDWARE OVERLAY plane, which bypasses normal compositing and mangles
 * transforms -- the half-mirrored "seam" Jason hits (2026-08-24), which a
 * tab switch "fixes" precisely because it knocks the video off the overlay.
 * A visually imperceptible filter makes the element ineligible for overlay
 * promotion, forcing the normal compositing path where scaleX(-1) is
 * honored. Applied to BOTH states: the seam also appeared when toggling
 * back to right-handed. 0.1%% brightness is below any visible threshold. */
.sm-video-handedness-player {
  filter: brightness(1.001);
}

.sm-video-handedness-player.sm-video-handedness-mirrored {
  /* SM-536: translateZ(0) + will-change + backface-visibility force the
   * mirrored video onto its own compositor layer. Without them, some
   * GPU/Chrome hardware-decode paths composite a mirrored video as the
   * half-and-half "butterfly" artifact (flipped with a seam down the
   * middle — Jason hit this live 2026-08-24; unreproducible on machines
   * that composite correctly, which is why every gate was green). */
  transform: scaleX(-1) translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}