/* badges.css · the app's marks (markup from assets/badges.js; see its header for the sources).
   A caller sizes a coin with width/height; nothing else about it is negotiable. */

/* the level coin (LevelCoinArt) */
.lvc { position: relative; display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 50%; line-height: 0; vertical-align: middle; }
.lvc > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the 2px punch in the surface colour, as on a card avatar (`border-2 border-[var(--app-card)]`) */
.lvc--punch { box-shadow: 0 0 0 2px var(--lvc-punch, #fff); }

/* the PRO tag (ProBadge): a 16px solid pill hanging half below its parent, centred in both directions,
   with a 1px hairline in the surface colour so it punches the ring rather than sitting on it */
.pro-tag { position: absolute; left: 0; right: 0; bottom: -8px; z-index: 2; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 72px; height: 16px; margin: 0 auto; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--pro-surface, #fff); border-radius: 8px; background: #faa21b; color: #1A1D23; overflow: hidden; pointer-events: none; }
.pro-tag b { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; font-weight: 700; font-size: 11px; line-height: 13px; letter-spacing: .5px; }
.pro-tag--fl { background: #05696b; color: #FFFFFF; }

/* the verified-ID mark beside a name (FreelancerCard: lucide BadgeCheck, --hue-green-ink) */
.vf-mark { flex: none; width: 14px; height: 14px; color: #2c7d5f; }

/* the level chip (LevelBadge chip): the rung's tint, its readable type, the coin leading */
.lv-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--lv-tint); color: var(--lv-text); font-weight: 700; }
.lv-chip:is([data-tier="1"], [data-lv="1"]) { --lv-tint: #EEF0F4; --lv-text: #545B66; }
.lv-chip:is([data-tier="2"], [data-lv="2"]) { --lv-tint: #E4F3FE; --lv-text: #085B97; }
.lv-chip:is([data-tier="3"], [data-lv="3"]) { --lv-tint: #F2EDFF; --lv-text: #6928B0; }
.lv-chip:is([data-tier="4"], [data-lv="4"]) { --lv-tint: #FEEAE2; --lv-text: #A4361A; }
.lv-chip:is([data-tier="5"], [data-lv="5"]) { --lv-tint: #FEEFCB; --lv-text: #7E4F04; }