@layer components {
  /* The others' cursors in a document (collab_controller.js): laid over the
     editor, drawn by the merge binding as absolute spans from this box's
     top left — a hairline caret in the person's hue, their name on it, and
     a wash where they have picked words. The binding styles them inline;
     the few things of ours stand with !important for that reason only. */
  .cursors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* A flag at the end of a line, or on the first, stands past the editor's
       box; nothing here takes pointer events, and #main clips the page's
       sideways overflow (layout.css), so it may show whole. */
    overflow: visible;

    /* The flag on the caret, as the canvas drew it: the person's face and
       first name in a pill tinted with their hue (`--cursor-hue`, set by the
       controller from the awareness), the app's small type, not the
       binding's white-on-colour. */
    /* Container > selection rect > caret > flag; the face inside the flag is
       a fourth span and must not become a pill of its own. */
    > span > span > span:not(.avatar) {
      display: inline-flex !important;
      align-items: center;
      gap: 0.3em;
      font: inherit !important;
      font-size: var(--text-x-small) !important;
      font-weight: 600;
      line-height: 1.3 !important;
      padding-block: 2px !important;
      padding-inline: 2px 8px !important;
      border-radius: 99rem !important;
      /* The person's tint and ink (_global.css), which follow dark mode as
         every pair does; only the hue is theirs. */
      background-color: oklch(var(--lch-person-tint) var(--cursor-hue)) !important;
      color: oklch(var(--lch-person-ink) var(--cursor-hue)) !important;
      box-shadow: 0 0 0 1.5px var(--color-canvas);
      inset-block-start: -1.6rem !important;
      inset-inline-start: -3px !important;

      .avatar {
        --avatar-size: 1.2rem;
      }
    }
  }
}