/* Keep original and processed images in one stable viewport box. */
.modal-canvas > #modal-image {
  inset: 5%;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  will-change: transform;
}

.modal-compare > #modal-compare-original,
.modal-compare > #modal-compare-result-layer > #modal-compare-result {
  inset: 5%;
  width: 90%;
  height: 90%;
  object-fit: contain;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.compare-line,
#modal-compare-line {
  width: 1px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 1px rgba(0, 0, 0, .42);
}

.compare-line::after,
#modal-compare-line::after {
  width: 24px;
  height: 24px;
  font-size: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .24);
}

/* The invisible slider keeps a large hit area although the visible line is thin. */
.compare-preview input,
#modal-compare-range {
  touch-action: none;
}

/* Let the full upload surface receive a drop even when the pointer is over its text or icon. */
.drop-zone > * {
  pointer-events: none;
}