/* overlay.js: edit handles, guides, drag feedback and the floor grid drawn over the video (WebGL2,
   native dpr); while it shows it also holds the video frame, so it moves with input.js's warp
   transform. */
.sv-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Live readout / snap label next to the pointer (spec §8); moved with transform only. */
.sv-ovpill {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgb(23 23 26 / 0.88);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  color: #fff;
  font: 600 12px/16px var(--sv-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.sv-ovpill__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #e6007a;
  vertical-align: 1px;
}

/* Axis marker: bottom-left of what the drawer leaves, above the toolbar; X/Y/Z labels click to
   their view. */
.sv-axes {
  position: absolute;
  z-index: 2;
  bottom: var(--sv-above-dock);
  left: calc(var(--sv-l, 0px) + 16px);
  width: 40px;
  height: 40px;
  pointer-events: none;
}

.sv-axes svg {
  display: block;
  overflow: visible;
}

.sv-axes [data-preset] {
  cursor: pointer;
  pointer-events: auto;
}

.sv-axes [data-preset]:hover circle {
  stroke: #fff;
  stroke-width: 1.5;
}

.sv-axes text {
  fill: #fff;
  font: 700 8px/1 var(--sv-font);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}