@layer components {
  /* Somebody named in somebody else's writing.

     A tint and a weight rather than a link. A mention is a fact about the
     sentence it is in — who this is addressed to — and drawing it as something
     to click makes it a control in the middle of a paragraph, which is a
     second thing to decide about while reading. */
  .mention {
    display: inline;
    padding: 0.1em 0.3em;
    margin-inline: -0.1em;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    color: var(--accent);
    background: var(--accent-sunk);
    white-space: nowrap;
  }

  /* The list the "@" opens. It is the editor's own popover, so this only sets
     the rows inside it — the frame is lexxy's and already reads as a menu. */
  .mention-prompt__name {
    font-size: var(--text-sm);
    color: var(--ink);
  }

  lexxy-prompt-item {
    display: flex;
    align-items: center;
    gap: var(--space);
    min-height: var(--control-h-sm);
    padding-inline: var(--space);
  }
}