/**
 * HighlightOverlay container styles
 *
 * Main overlay container for rendering highlights over the canvas.
 * Uses CSS transform pattern for automatic coordinate mapping.
 */

.highlightOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 100; // Above canvas but below UI elements
}

.highlightContainer {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;

  // Transform applied inline via style prop:
  // transform: translate(viewportX, viewportY) scale(zoom)

  // This automatically maps all child coordinates to canvas space
}
