/* One visual pill follows navigation. Native buttons keep their focus and
   accessible current/confirmed states throughout the motion. */
.ritual-room.has-module-navigation .module-progress.has-module-motion .module-step[data-module-motion-role]::before {
  width: var(--module-motion-dot-width, 6px);
  border-radius: 6px;
  opacity: var(--module-motion-dot-opacity, 1);
  transition: none;
}
.ritual-room.has-module-navigation .module-progress .module-motion-pill {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--module-motion-width, 24px);
  height: var(--module-motion-height, 6px);
  box-sizing: border-box;
  border: var(--module-motion-border-width, 1px) solid var(--module-motion-border, currentColor);
  border-radius: 6px;
  background: var(--module-motion-fill, transparent);
  transform: translate3d(var(--module-motion-x, 0px), var(--module-motion-y, 0px), 0) translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .ritual-room.has-module-navigation .module-progress .module-motion-pill { display: none; }
  .ritual-room.has-module-navigation .module-progress.has-module-motion .module-step[data-module-motion-role]::before {
    width: 6px;
    opacity: 1;
  }
  .ritual-room.has-module-navigation .module-progress.has-module-motion .module-step.is-current[data-module-motion-role]::before { width: 24px; }
}