/* เหรียญของฉัน (แท็บกิจกรรม หน้าตัวฉัน · เจ้าของระบบ 21 ต.ค. 2569) · ภาพเหรียญพร้อมสายห้อยคอวาดจาก cert-medal.js (สัดส่วน 3:4) */
.medal-shelf .medal-shelf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.medal-shelf .medal-item {
  display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0;
  color: inherit; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.medal-shelf .medal-art { display: block; width: 100%; max-width: 132px; aspect-ratio: 3 / 4; background: radial-gradient(circle at 50% 66%, #e4eae6 0 34%, transparent 35%); }
.medal-shelf .medal-art canvas { display: block; width: 100%; height: 100%; }
.medal-shelf .medal-item:has(canvas) .medal-art { background: none; }
.medal-shelf .medal-item strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; font-size: .85rem; line-height: 1.3; overflow-wrap: anywhere;
}
.medal-shelf .medal-item small { color: var(--health-muted, #66736c); font-size: .78rem; }
.medal-shelf .medal-item em { padding: 1px 8px; border-radius: 999px; background: #fff7e6; color: #9a5b00; font-size: .75rem; font-style: normal; font-weight: 700; }
.medal-shelf .medal-item.is-waiting .medal-art { opacity: .55; filter: saturate(.4); }
.medal-shelf a.medal-item:focus-visible { outline: 3px solid var(--health-primary, #256e45); outline-offset: 4px; border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .medal-shelf a.medal-item .medal-art { transition: transform .2s ease; }
  .medal-shelf a.medal-item:active .medal-art { transform: scale(.94) rotateY(18deg); }
}
/* เหรียญออกกำลังกายที่เจ้าหน้าที่อนุมัติ (30 ต.ค. 2569) · ปุ่มแตะพลิกดูด้านหลัง (ข้อมูลกิจกรรม วันเวลาที่ออก เลขที่) */
.medal-shelf button.medal-item { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.medal-shelf button.medal-item:focus-visible { outline: 3px solid var(--health-primary, #256e45); outline-offset: 4px; border-radius: 16px; }
.medal-shelf .medal-item em.medal-code { background: #eaf4ee; color: #1f5f3b; font-weight: 600; line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .medal-shelf button.medal-item .medal-art { transition: transform .2s ease; }
  .medal-shelf button.medal-item:active .medal-art { transform: scale(.94) rotateY(18deg); }
}