.activity-marker-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;
}

#universe[data-loading=true] .activity-marker-layer {
  visibility: hidden;
}

.activity-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  min-height: 20px;
  padding: 2px 7px 2px 4px;
  border: 1px solid #9aafa0;
  border-radius: 999px;
  background: #fff8e9f2;
  box-shadow: 0 2px 7px #183d3826;
  color: #234d48;
  font: 650 11px/1.4 var(--sans, system-ui, sans-serif);
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
  white-space: nowrap;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
}

.activity-marker:focus-visible,
.npc-actor-label:focus-visible {
  outline: 3px solid #f6c453;
  outline-offset: 3px;
}

.activity-marker-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid #315f59;
  border-radius: 50%;
  background: #d9eee4;
}

.activity-marker-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-marker[data-mode=near] {
  max-width: 210px;
  min-height: 26px;
  padding: 4px 9px 4px 5px;
  border-color: #71958a;
  background: #fff9eaf7;
  box-shadow: 0 3px 10px #183d3830;
  font-size: 12px;
}

.activity-marker[data-mode=near] .activity-marker-dot {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
}

.activity-marker[data-mode=distant] {
  min-height: 18px;
  padding: 1px 6px 1px 3px;
  font-size: 10px;
}

.activity-marker[data-mode=distant] .activity-marker-dot {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
}

.activity-marker[data-mode=dot] {
  width: 8px;
  height: 8px;
  min-height: 0;
  padding: 0;
  border-color: #fff7e5;
  border-radius: 50%;
  background: #346c66;
  box-shadow: 0 1px 4px #173c372e;
}

.activity-marker[data-mode=dot] .activity-marker-dot,
.activity-marker[data-mode=dot] .activity-marker-copy {
  display: none;
}

.activity-marker[data-state=pending] {
  border-color: #b0824d;
  background: #f7e3bdf7;
  color: #6e4128;
}

.activity-marker[data-state=pending] .activity-marker-dot {
  border-color: #8b5a2f;
  background: #fff0c9;
}

.activity-marker[data-state=all_completed] {
  border-color: #6f9c86;
  background: #e5f1e4f7;
  color: #285645;
}

.activity-marker[data-state=pk_only] {
  border-color: #4d817e;
  background: #dceceaf7;
  color: #214f4e;
}

.activity-marker[data-state=loading] {
  border-color: #9aaaa1;
  background: #f8f3e7f2;
  color: #56665f;
}

.activity-marker[data-state=error] {
  border-color: #a77b69;
  background: #f5e8ddf5;
  color: #713f35;
}

.activity-marker[data-state=error] .activity-marker-dot {
  border-color: #8f4d3d;
  background: #c9826c;
}

.activity-marker[data-state=no_tasks] {
  border-color: #aeb9aa;
  background: #f6f4ebee;
  color: #68726a;
}

.activity-marker[data-state=no_tasks] .activity-marker-dot {
  border-color: #879589;
  background: #dfe5d9;
}

.activity-marker[data-state=pending][data-mode=dot] {
  background: #b57b3d;
}

.activity-marker[data-state=all_completed][data-mode=dot] {
  background: #4f8b70;
}

.activity-marker[data-state=pk_only][data-mode=dot] {
  background: #3f7c7a;
}

.activity-marker[data-state=error][data-mode=dot] {
  background: #a65f4c;
}

.activity-marker[data-state=no_tasks][data-mode=dot] {
  background: #859086;
}

@media (max-width: 600px) {
  .activity-marker {
    max-width: 150px;
    font-size: 10px;
  }

  .activity-marker[data-mode=near] {
    max-width: 165px;
    font-size: 11px;
  }
}