/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: badges
   The gamification kit's badges: a grid of tiles, each an icon and a name, earned or still locked, a locked one
   showing how close it is. Opt-in: link it after mek.css, with js/badges.js:
     <ul class="badges" aria-label="Badges">
       <li class="badge" data-badge="first" data-earned><svg class="icon x3" aria-hidden="true"><use href="…/icons.svg#icon-medal"/></svg>First steps</li>
       <li class="badge" data-badge="week" data-progress="4/7"><svg class="icon x3" aria-hidden="true"><use href="…#icon-flame"/></svg>A week in a row</li>
     </ul>
     mekBadges.earn(document.querySelector(".badges"), "week");
   Needs the core box, tag and meter. In the mek.parts layer, so a project's CSS wins. */

@layer mek.parts {

/* ---------- Dials ---------- */
/* on every themed area too, so a box in another theme works these out from its own colours */
:root, [data-theme] {
  --badge-size: 96px;                  /* a tile's width; .sm: 72px */
  --badge-icon: var(--accent);         /* an earned badge's icon */
  --badge-edge: var(--500-accent);     /* an earned badge's edge: the quiet accent */
  --badge-locked: var(--line);         /* a locked badge's icon and edge: 400 */
}

/* ---------- Badges ----------
   Tiles --badge-size wide, 8px apart, as many across as fit. Each is a px-box: the icon (a 15px icon at .x3, 45px,
   on whole pixels) and under it the name in 12, two lines at most. Earned (data-earned): the icon in --badge-icon,
   the edge in --badge-edge, the name 900. Locked: the icon and the edge in --badge-locked (400), the name 700; with
   data-progress ("4/7") a core meter of 4px cells under the name. js/badges.js adds the meter and reads each one out
   ("A week in a row: locked, 4 of 7"). Earning one (mekBadges.earn) changes only colours and puts a "New" tag in its
   top right corner, over the edge, so nothing moves; the tile blinks twice (not under reduced motion). */
.badges { display: grid; grid-template-columns: repeat(auto-fill, var(--badge-size)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.badges.sm { --badge-size: 72px; }
.badge { position: relative; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start; gap: 6px;
  padding: 12px 6px 9px; min-height: 120px; text-align: center; font-size: var(--text-crisp); line-height: 14px; color: var(--text-muted);   /* the small size (14): two lines in the tile */
  --edge: var(--badge-locked); --edge-to: var(--badge-locked); --fill: var(--bg); --fill-to: var(--bg); }
.badges.sm .badge { min-height: 96px; padding-top: 8px; }
.badge > .icon { color: var(--badge-locked); }
.badges.sm .badge > .icon { width: 30px; height: 30px; }   /* .x2 */
.badge-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.badge > .meter { align-self: end; width: 100%; --meter-cell: 4px; --meter-gap: 1px; --meter-h: 4px; }
.badge[data-earned] { color: var(--text); --edge: var(--badge-edge); --edge-to: var(--badge-edge); }
.badge[data-earned] > .icon { color: var(--badge-icon); }
.badge > .tag { position: absolute; top: -7px; right: -4px; }   /* "New": over the corner, out of the flow */
.badge.just { animation: mek-blink var(--dur-beat) steps(1, end) 4; }

}