enhance(icon-picker): clamp emoji glyph and optically lift page-ref icons

Two related polish passes on the inline icon slot:

- Emoji glyphs in page-ref and left-sidebar contexts now render at
  font-size 16 (was 20). emoji-mart's <em-emoji size="N"> only sets
  font-size on its inner spans, and native emoji fonts produce a
  bounding box ~32% taller than font-size — so size=20 visually
  rendered at ~26.5px and bled into the row below in the left
  sidebar. Clamping to 16px lands the glyph at ~21px, fitting the
  20x20 slot. Both `em-emoji` and `em-emoji span` selectors are
  load-bearing because emoji-mart's inline font-size on the inner
  span wins over !important on the ancestor — same pattern as the
  customize-band compact state at icon.css:2214.

- Pull all inline page-ref icons up 1px via translateY. vertical-align:
  middle centers icons on x-height/2, but readers compare against
  cap-height/2 (~2px higher in Inter at body size), so the
  geometric center reads as a sag. translateY decouples optical
  correction from layout flow.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/main/frontend/components/block.css

@@ -69,6 +69,12 @@
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
+    /* Optical lift: `vertical-align: middle` centers on the parent's
+       x-height middle, but readers compare the icon against the cap-
+       height middle (~2px higher in Inter at body size). The pure
+       geometric answer reads as "icon sags." translateY corrects
+       the optical center without disturbing layout flow. */
+    transform: translateY(-1px);
     padding-left: 1px;
 
     &.as-emoji {
@@ -103,6 +109,21 @@
     height: 16px;
   }
 
+  /* Emoji glyphs render via the native font (Apple Color Emoji etc.),
+     whose bounding box is ~32% taller than `font-size`. emoji-mart's
+     `<em-emoji size="20">` sets `font-size: 20px` on its inner span
+     and the visual lands at ~26.5px — overflowing the 20×20 slot.
+     Clamp the inner span's font-size to land at ~18-19px visual,
+     comfortably inside the slot. Both selectors are load-bearing:
+     emoji-mart's inline `font-size` on the descendant span wins over
+     `!important` on the ancestor, so we target both directly. (Same
+     pattern as icon.css:2214 for the customize-band's compact state.) */
+  .icon-cp-container:not(.photo-icon) em-emoji,
+  .icon-cp-container:not(.photo-icon) em-emoji span {
+    font-size: 16px !important;
+    line-height: 1 !important;
+  }
+
   .icon-emoji-wrap em-emoji,
   .icon-cp-container .ui__icon {
     display: inline-flex;

src/main/frontend/components/container.css

@@ -137,6 +137,16 @@
       max-width: 20px;
       overflow: hidden;
     }
+
+    /* Emoji clamp — see block.css's `.page-ref ... em-emoji` rule for
+       the rationale (emoji-mart inline-styles win over `!important` on
+       the ancestor, so target both em-emoji and its descendant span).
+       At font-size 14 the glyph lands ~18-19px, fitting inside the
+       20×20 tile without bleeding into adjacent rows. */
+    em-emoji, em-emoji span {
+      font-size: 16px !important;
+      line-height: 1 !important;
+    }
   }
 
   .icon-cp-container {