/* М212 — four milestones at 375–390 px; colors follow the current widget theme. */
.m212-eternal .pgm-miles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m212-eternal .pgm-b { min-width: 0; }
.m212-eternal .pgm-medal { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; }
.m212-eternal .pgm-medal b { max-width: 100%; white-space: nowrap; overflow-wrap: normal; }
.m212-eternal .pgm-medal .m212-number-wide { font-size: 15px; }
.m212-eternal .pgm-medal .m212-number-long { font: 700 12px/1 var(--f-body); }
.m212-eternal .pgm-medal .m212-number-longer { font: 700 11px/1 var(--f-body); white-space: normal; }
.m212-eternal .pgm-b small { max-width: 100%; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow-wrap: normal; }
.m212-eternal .m212-weeks .pgm-b small { font-size: 11px; }
.m212-eternal .pgm-streak { padding-inline: 12px; }
.m212-eternal .m212-weeks { gap: 4px; }
.m212-eternal .pgm-sh { flex-wrap: wrap; }
.m212-eternal .m212-earned { position: absolute; right: -1px; bottom: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); color: var(--coral); font: 700 12px/1 var(--f-body); }
.m212-week-goals { display: grid; gap: 10px; min-width: 0; }
.m212-week-caption { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.4; }
.m212-progress { display: block; width: 100%; height: 6px; margin-top: 12px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: rgba(0, 0, 0, .18); color: var(--ink); }
.m212-progress::-webkit-progress-bar { border-radius: inherit; background: rgba(0, 0, 0, .18); }
.m212-progress::-webkit-progress-value { border-radius: inherit; background: var(--ink); }
.m212-progress::-moz-progress-bar { border-radius: inherit; background: var(--ink); }
@media (max-width: 380px) {
  .m212-eternal .pgm-medal { max-width: 56px; }
  .m212-eternal .pgm-b small { font-size: 11px; }
}