/* Achievements and staff badges: round tokens on posts, tiles on profiles. Built on the Float tokens in float.css. */
.ach { --ach: var(--accent); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; line-height: 1;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--ach) 34%, transparent), color-mix(in oklab, var(--ach) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ach) 45%, transparent), 0 2px 8px -3px color-mix(in oklab, var(--ach) 60%, transparent);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease-glide); }
.ach.lg { width: 44px; height: 44px; font-size: 22px; flex: none; }
.achs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; text-decoration: none; color: inherit; }
.achs:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-pill); }
@media (hover: hover) { .achs:hover .ach { transform: translateY(-2px) scale(1.08); } }
.ach-more { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-pill);
  font: 700 10px/1 var(--font-ui); color: var(--text-muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 760px) { .ident .achs { justify-content: flex-start; } }

.ach-grid { list-style: none; margin: 0; padding: var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-2); }
.ach-tile { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border); animation: ach-in var(--t-med) var(--ease-liquid) both; }
.ach-tile b { font: 700 var(--fs-sm)/1.25 var(--font-display); }
.ach-tile.locked .ach { filter: grayscale(1); opacity: .45; box-shadow: inset 0 0 0 1px var(--border); }
.ach-tile.locked b { color: var(--text-muted); }
.ach-bar { height: 5px; margin: 6px 0 3px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); }
.ach-box .tcat .btn { float: right; margin-top: -4px; }
@keyframes ach-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ach, .ach-tile { animation: none; transition: none; } }

/* Admin > Badges */
.ach-row { flex-wrap: wrap; }
.ach-icon-in { width: 3.2em; text-align: center; font-size: 18px; }
.ach-row input[type=color] { width: 36px; height: 30px; padding: 2px; border-radius: var(--r-sm); }
.ach-award { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }

/* Studio look keeps post cards minimal: badges stay on the profile only. */
:root[data-look="studio"] .ident .achs { display: none; }