.mcp-progress-ring-component {
    padding: 8px 18px 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #EBEBEB;
  }
  .mcp-progress-ring-title { font: var(--sds-semantic-typography-body-medium); }
  .mcp-progress-ring-container {
    --mcp-progress-ring-circumference: 364.42; /* 2 * pi * 58 */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mcp-progress-ring {
    transform: rotate(-90deg);
    transform-origin: center;
  }

  .mcp-progress-ring-bar {
    /* We ensure the dasharray matches the circumference */
    stroke-dasharray: var(--mcp-progress-ring-circumference); 
    
    /* This calculation handles the 'gap' */
    /* If --percent is 75, offset is 364.42 * (1 - 75/100) */
    stroke-dashoffset: calc(364.42px - (var(--mcp-progress-ring-percent) * 364.42px) / 100);
    
    transition: stroke-dashoffset 0.3s ease;
  }

  .mcp-progress-ring-text {
    position: absolute;
    font: var(--sds-semantic-typography-body-medium);
    line-height: 20px;
    text-align: center;
  }