/* Swapped emoji icons — injected by src/js/emoji-icons.js.
 *
 * Each replaced emoji becomes a <span class="emoji-ico"> holding an inline SVG.
 * The rules here are appearance-agnostic on purpose: two sets use them (Circa
 * 1990's pixel line art and Arsenal's rounded outlines) and a third would need
 * no CSS at all. Anything genuinely theme-specific belongs in that theme's own
 * stylesheet.
 *
 * Sized to 1em and drawn in currentColor so an icon tracks the text around it —
 * black on Windows 2000's gray face, white on its navy selection bars, ink on
 * Arsenal's white canvas, and inverted again in Arsenal Dark. That is the whole
 * reason these are inline SVG rather than <img>. */

.emoji-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  line-height: 1;
  flex-shrink: 0;
}

.emoji-ico > svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* Left-nav glyphs read a touch larger, matching the emoji footprint they
   replaced — an outline icon has less visual mass than a filled emoji at the
   same box size. */
.nav-icon .emoji-ico {
  width: 1.15em;
  height: 1.15em;
}

/* Status tints. Only the Arsenal set sets data-tint (see TINTS in
   emoji-icons.js), so the attribute is its own scope — no theme selector
   needed. The shape already distinguishes these, so the colour is
   reinforcement, never the only channel. */
.emoji-ico[data-tint="good"] { color: var(--green); }
.emoji-ico[data-tint="bad"]  { color: var(--red); }