/* ============================================================================
   Professional line-icon system (2026-06-19)
   Replaces decorative emoji with inline draftsman-style SVGs across content.
   Icons are 24px-grid, 1.6 stroke, currentColor — they inherit text color,
   so they work on light and dark panels with no per-page tuning.
   Linked globally in app/layout.tsx (after responsive.css).
   ========================================================================== */

.gm-ico{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-0.15em;
  flex:0 0 auto;
  overflow:visible;
}

/* Audience pills: a touch larger than the label, spaced before it, in the
   muted grey accent so it reads as a quiet marker rather than competing
   with the serif label. */
.gm-aud .gm-ico{
  width:1.25em;
  height:1.25em;
  margin-right:.55em;
  vertical-align:-0.22em;
  color:#6b7178;
}
.gm-aud:hover .gm-ico{ color:#aeb4bc; }

/* Section / category headings with a leading icon. */
.gm-category-title .gm-ico{
  width:1em;
  height:1em;
  margin-right:.4em;
  vertical-align:-0.1em;
}

/* Inline list bullets (changelog "what's new" items). */
li > .gm-ico:first-child{ margin-right:.55em; color:#6b7178; }

/* Stat / tip / resource tiles size their glyph via font-size — 1em follows. */
.gm-tip-icon .gm-ico{ color:#a16207; }

/* Play button: white triangle centered in its circular badge. */
.gm-play-button{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.gm-play-button .gm-ico{
  width:26px;
  height:26px;
  vertical-align:0;
  margin-left:2px; /* optical centering of the triangle */
}

/* Avatar / contributor placeholders: dark ink line icon centered in the tile. */
.gm-avatar .gm-ico{ width:28px; height:28px; vertical-align:0; color:#404040; }
.gm-contributor-photo .gm-ico{ width:42px; height:42px; vertical-align:0; color:#404040; }