/* Keep the original design, with touch-sized targets and bounded task labels. */
#cleaning-tasks[data-tasks-ready] .hotspot-wrapper {
  width: 44px;
  height: 44px;
}
#cleaning-tasks[data-tasks-ready] .hotspot-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#cleaning-tasks[data-tasks-ready] .hotspot-label {
  width: max-content;
  max-width: var(--task-label-width, 220px);
  white-space: normal;
  text-align: left;
  pointer-events: none;
  top: calc(50% + var(--task-label-shift, 0px));
  left: calc(100% + 4px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity .15s;
}
#cleaning-tasks[data-tasks-ready] .align-left .hotspot-label {
  left: auto;
  right: calc(100% + 4px);
}
#cleaning-tasks[data-tasks-ready] .is-open .hotspot-label {
  opacity: 1;
  visibility: visible;
}
#cleaning-tasks[data-tasks-ready] .hotspot-wrapper:focus-visible .hotspot-dot {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  #cleaning-tasks .hotspot-dot::after { animation: none; }
}