@layer components {
  /* An @-mention in saved rich text and in the editor: the person's first
     name, in the sentence, wearing their face (user, 2026-10-10). Its own
     file and not a second component family appended to lexxy.css — the chip
     renders wherever rich text is *read*, which is most of the app, and only
     sometimes where it is written.

     A pill that is invisible until it is selected. Not an inline-flex box
     set on the line's bottom, but plain inline text, because a flex box
     takes its baseline from its first item — the face, whose own
     baseline is the initials floating at the circle's centre — and the name
     rode off the paragraph's line in one browser and not another (user,
     2026-08-07, and again 2026-10-10). Inline, the name IS on the line, and
     only the circle has to be placed. The ground is drawn a little past the
     text on either side by two shadows, so the pill has air without padding
     that would move the words around it. Selected in the editor, the gem
     draws a focus ring around the node; we fill the pill instead.

     The face is sized in rem, not em: the avatar sets its own font-size for
     the initials, which would re-anchor every em here. Set `middle`, so its
     centre lands on the text's x-height centre in any browser and at any
     size; a fixed drop in rem was right at one size only. */
  .mention {
    --mention-background: transparent;

    white-space: nowrap;
    background: var(--mention-background);
    border-radius: 99rem;
    box-shadow:
      -0.25ch 0 0 var(--mention-background),
      0.5ch 0 0 var(--mention-background);

    .avatar {
      display: inline-grid;
      inline-size: 1.1rem;
      block-size: 1.1rem;
      margin-inline-end: 0.35ch;
      font-size: 0.55rem;
      vertical-align: middle;
    }

    lexxy-editor & {
      cursor: pointer;
    }

    .node--selected & {
      --mention-background: var(--color-ink);
      color: var(--color-canvas);
    }
  }

  /* Inline, the wrapper too: the gem makes every custom attachment an
     inline-flex box, which sets the chip on the face's baseline again one
     level up. */
  action-text-attachment[content-type="application/vnd.actiontext.mention"] {
    display: inline;
  }

  /* The remove button seated on the face, a circle the face's size. The
     gem's own place is past the pill's end, over the next word. The anchor is
     the pill's box, in px from the editor's top-left, so these stay physical
     as the gem's do. */
  lexxy-attachment-toolbar[data-content-type="application/vnd.actiontext.mention"] {
    --button-size: 1.25rem;

    left: calc(var(--lexxy-anchor-left) + 0.55rem);
    transform: translate(-50%, -50%);

    .lexxy-floating-controls__group {
      padding: 0;
      border-radius: 50%;
    }
  }
}