/* ==========================================================================
   CONFIRMATION MARKER
   The ✓ side. A filled pixel check glyph in --color-accent-confirm beside a
   line of white text.

   Colour is never the sole carrier of meaning (design-rules §18): the check
   is a SHAPE. Read with colour stripped, a tick still says yes. The ✗ side in
   §4 will take the opposing glyph, in the action accent — the pair differ by
   form first and hue second.
   ========================================================================== */

.marker {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--color-text-heading);
}

.marker__glyph {
  flex: 0 0 auto;
  inline-size: var(--icon-size-pixel-sm);
  block-size: var(--icon-size-pixel-sm);
  /* 15px is 1:1 with the glyph grid, so every step snaps exactly. */
  shape-rendering: crispEdges;
  fill: var(--color-accent-confirm);
  /* Optically align the glyph to the first line's cap height rather than to
     the line box, which sits it too high next to lead-scale text.

     ⚠ THIS IS ONLY CORRECT FOR AN INLINE GLYPH SITTING BESIDE TEXT. In a
     centred container — a flex box with align-items: center — it is actively
     wrong: the MARGIN BOX is what gets centred, so this displaces the glyph
     by half its own value and the mark lands low. §4's badges hit exactly
     this and zero it out (R8o, contrast.css). Any future component that
     centres this glyph rather than setting it beside text must do the same. */
  margin-block-start: 0.28em;
}

.marker__label {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}