/* Tier rings.

Standing has to be readable in a feed at arm's length, where a text label is
not. So the ring carries it: the colour says which tier, and an ornament fused
onto it says how far. Each step adds one thing rather than changing the shape,
so the progression reads as growth instead of a different badge each time.

Markup:  <span class="av" data-tier="gold" style="--ring:#D8B45C">…</span>
*/
.av{
  position:relative;
  border-radius:50%;
  display:grid;place-items:center;
  overflow:visible;                 /* the ornament sits outside the circle */
  background:var(--gold,#D8B45C);
  color:var(--ink,#08200F);
  font-family:'Cormorant',serif;font-weight:600;
  box-shadow:0 0 0 2px var(--deep,#0F4D2E), 0 0 0 4px var(--ring,#8FA096);
}
.av > img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.av::after{content:'';position:absolute;inset:0;border-radius:50%;
  pointer-events:none}

/* the ornament */
.av[data-mark]::before{
  content:attr(data-mark);
  position:absolute;top:-5px;left:-5px;z-index:3;
  width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Vazirmatn',system-ui,sans-serif;font-size:.62rem;line-height:1;
  background:var(--ring,#8FA096);color:var(--deep,#0F4D2E);
  border:2px solid var(--deep,#0F4D2E);
}

/* ---- the steps ---- */
.av[data-tier="regular"]{
  box-shadow:0 0 0 2px var(--deep,#0F4D2E), 0 0 0 4px var(--ring);
}
.av[data-tier="special"]{
  box-shadow:0 0 0 2px var(--deep,#0F4D2E), 0 0 0 5px var(--ring);
}
/* gold earns a halo */
.av[data-tier="gold"]{
  box-shadow:0 0 0 2px var(--deep,#0F4D2E), 0 0 0 5px var(--ring),
             0 0 16px -2px var(--ring);
}
/* diamond keeps the halo and gains an outer hairline */
.av[data-tier="diamond"]{
  box-shadow:0 0 0 2px var(--deep,#0F4D2E), 0 0 0 5px var(--ring),
             0 0 0 7px rgba(255,255,255,.16),
             0 0 20px -2px var(--ring);
}
.av[data-tier="diamond"]::before{
  box-shadow:0 0 10px -1px var(--ring);
}

.av-lg{width:58px;height:58px;font-size:1.75rem}
.av-sm{width:34px;height:34px;font-size:1rem}
.av-sm[data-mark]::before{width:15px;height:15px;font-size:.52rem;
  top:-4px;left:-4px;border-width:1.5px}
@media (prefers-reduced-motion:reduce){.av{transition:none}}