@layer components {
  /* Comments on a document's words (docs/planning/documents-writing.md §5).
     The mark is a CSS highlight, never an element: the editor's DOM belongs
     to Lexical, so the words are found again by their text and painted
     through the Highlight API (annotations_controller.js). Mizu, the
     selected voice, as every mark that means "this one". */
  ::highlight(annotation) {
    background-color: var(--color-selected);
    color: var(--color-selected-ink);
  }

  /* The words a comment led to, lit for a moment: mizu at full strength,
     the selection's ink as the wash. A selection, not shu — the accent's
     four places (HANSHI, Colour) hold none for it. */
  ::highlight(annotation-focus) {
    background-color: var(--color-selected-ink);
    color: var(--color-canvas);
  }

  /* The margin marker at the words' first line: the face of whoever wrote
     the comment, and how many stand on these words. A door to the thread
     below — a button (buttons.css) with the quiet one's hairline and wash,
     drawn as a small pill on canvas, since past the sheet's margin it stands
     inside the words' right edge. */
  .annotation-marker {
    --btn-padding: 2px;
    --btn-radius: 99rem;
    --btn-background: var(--color-canvas);
    --btn-color: var(--color-ink-subtle);
    --btn-border-color: var(--color-line);
    --btn-background-hover: var(--color-surface);
    --btn-font-size: var(--text-x-small);

    position: absolute;
    inset-inline-end: calc(-1 * var(--inline-space-double) - 2.5rem);

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

  @container main (width < 60rem) {
    .annotation-marker {
      inset-inline-end: 0;
    }
  }

  /* The words picked, as a box laid over them (annotate_controller.js):
     what "Comment" hangs from — a one-row ⋯ menu, which opens upward
     (dialog.css). Nothing to see or to press. */
  .annotate-anchor {
    position: absolute;
    pointer-events: none;
  }

  /* The markers' layer: no height, at the words' top, so a marker's offset
     is the words' own. */
  .annotation-markers {
    position: relative;
    block-size: 0;
    /* Over the words that follow it in the flow, or the editor's paragraph
       takes the click meant for the marker. */
    z-index: 1;
  }
}