/* Live collaboration: avatars in the top bar, and a coloured edge on blocks someone else is editing */
.presence { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.presence .avatar { cursor: default; }
.presence-more { font-size: 12px; }
.block.remote-editing { box-shadow: inset 2px 0 0 var(--who, var(--accent)); border-radius: 0; }
.block.remote-editing::after {
  content: attr(data-who); position: absolute; right: 0; top: -9px; font-size: 10px; line-height: 14px;
  padding: 0 5px; border-radius: 4px; background: var(--who, var(--accent)); color: #fff; pointer-events: none; white-space: nowrap;
}

/* other people's carets and selections */
.remote-cursors { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rc-sel { position: absolute; opacity: .18; border-radius: 2px; }
.rc-caret { position: absolute; width: 2px; border-radius: 1px; }
.rc-name { position: absolute; left: 0; bottom: 100%; font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 3px 3px 3px 0; color: #fff; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .rc-caret { transition: left .12s, top .12s; } }