/* MV_Medallion (#281) — the reusable coloured kind-medallion: a small circle
   carrying a kind glyph, in the kind's heritage hue. Each content kind owns one
   colour (the Chronicle kind palette in variables.css); life beats (birth /
   union / remembrance) wear a solid fill + white glyph, authored content
   (story / moment) a soft wash + strong glyph, so tinted "hero" cards stay
   calm. The full design language lives in docs/BUILD-NOTES.md. */

.mv-medallion {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Glyph scales with the medallion so a custom `size` needs no extra wiring. */
.mv-medallion .icon {
  display: inline-flex;
  width: 55%;
  height: 55%;
}

.mv-medallion .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Life beats — solid fill + white glyph (a strong dot of colour), finished as
   enamel (lantern-light pass): a top-light sheen over the kind hue, a fine
   inner highlight, and a whisper of lift, so each medallion reads as a small
   lit token rather than a flat colour disc. The hue itself still comes only
   from the kind tokens; the sheen layers are pure white/warm-shadow light. */
.mv-medallion--birth,
.mv-medallion--wedding,
.mv-medallion--death {
  background-image: radial-gradient(
    circle at 32% 26%,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    transparent 66%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 1.5px rgba(28, 25, 23, 0.18),
    0 1px 2.5px rgba(28, 25, 23, 0.18);
}

.mv-medallion--birth {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

.mv-medallion--wedding {
  background-color: var(--color-union);
  color: var(--color-surface);
}

.mv-medallion--death {
  background-color: var(--color-remembrance-deep);
  color: var(--color-surface);
}

/* Authored content — soft wash + strong glyph (keeps white hero cards calm).
   A gentler enamel: a faint sheen + a fine porcelain ring, no dark inset (it
   would muddy the pale wash). */
.mv-medallion--story,
.mv-medallion--moment {
  background-image: radial-gradient(
    circle at 32% 26%,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 60%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 1px 2px rgba(28, 25, 23, 0.12);
}

.mv-medallion--story {
  background-color: var(--color-highlight-soft);
  color: var(--color-highlight-hover);
}

.mv-medallion--moment {
  background-color: var(--color-moment-soft);
  color: var(--color-moment);
}