/* The emoji grid — fizzy's reaction list on the house popup. One family for
   every surface that offers the fifty: the boost composer's picker and the
   message-category editor's. The buttons are .btn btn--circle, so this owns
   only what is genuinely its own — the grid, and the type size that makes an
   emoji the whole face of its control.

   Ten to a row needs ~22rem, which a phone does not always have, so it drops
   to six. That rule was the one thing a second copy of this grid had lost.

   This class sets display, so it never goes on a popover root: an author
   display beats the UA's [popover]:not(:popover-open){display:none} and the
   closed grid stays laid out, invisible and still taking clicks. Both callers
   put it on a div inside the .popup (2026-08-29). */
@layer components {
  .emoji-picker {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--inline-space-half);
    padding: var(--block-space-half) var(--inline-space);

    @media (width < 35rem) {
      grid-template-columns: repeat(6, 1fr);
    }

    /* The face is the whole control, so it is sized from the type scale, not
       from a rem: fizzy's 1.3rem reads as 24.7px because its root grows to
       19px past 100ch, and ours never moves — copied literally it landed at
       20.8px and read small (user, 2026-08-30). --text-large is the size the
       quick-boost strip already wears in the same menu, and being fluid it
       needs no width query of its own. */
    .btn {
      --emoji-size: var(--text-large);
      --btn-size: calc(var(--emoji-size) * 1.3);

      font-size: var(--emoji-size);
      position: relative;

      /* The hovered face grows over its neighbours, so it needs to sit above
         them — and the ring on a focused one must not be clipped either. */
      &:hover,
      &:focus-visible {
        z-index: 1;
      }

      &:hover {
        scale: 1.3;
      }

      /* Nothing hovers on a phone, so the faces carry the size instead. */
      @media (any-hover: none) {
        --emoji-size: var(--text-x-large);
      }
    }
  }
}