@layer components {
  /* An @-mention in saved rich text and in the editor: the person's name, in
     the sentence, wearing their face. 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.

     The name is ordinary inline text — deliberately NOT a flex item. As an
     inline-flex chip it took its baseline from its first child, the avatar,
     whose own baseline is the initials floating at the circle's centre; the
     name then rode a quarter-line above every word around it (user,
     2026-08-07). Left inline, the name sits on the paragraph's own baseline
     because it IS on it, and only the circle has to be placed.

     Sized in rem, not em: the avatar sets its own font-size for the initials,
     which would re-anchor every em here, and this app pins its root and never
     inflates it (AGENTS.md). A shade over the cap height, dropped a quarter
     line, so the circle's centre lands on the text's optical centre. */
  .mention {
    white-space: nowrap;

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